在资源时间线中拖动事件时的 FullCalendar 工具提示错误

Question

我正在使用 JavaScript FullCalendar 库来构建我的日历。现在更新我的代码以使用 FullCalendar V4。在资源时间线视图中拖动事件时，工具提示无法按预期工作（拖动时显示重复的工具提示）。此问题仅发生在资源时间线视图中，而不发生在 dayGrid 视图中。我附上了两个codepen代码。 Daygrid 视图工作正常，但资源时间线视图不工作。
https://codepen.io/nmwangxin/pen/WNeRQaX https://codepen.io/nmwangxin/pen/qBWROKz

eventRender: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: 'test',
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      });
    },

Answer 1

拖动事件时，它每次都会重新呈现，所以基本上您每次都在重新创建一个新的工具提示，从而创建多个实例，这些实例又失去了对被破坏的元素的引用，因此它的位置很奇怪。我建议连接到 "eventMouseEnter" 和 "eventMouseLeave" 回调并在那里创建和销毁单个工具提示对象。这是一个例子：

var tooltip = null;
eventMouseEnter: function(info) {
  tooltip = new Tooltip(info.el, {
    title: info.event.title,
    placement: 'top',
    trigger: 'hover',
    container: 'body'
  });
},
eventMouseLeave:  function(info) {
  if (tooltip) {
    tooltip.dispose();
  }
}

https://codepen.io/alex-hazanov/pen/rNBjPyL

Answer 2

或者像这样使用 bootstrap 的工具提示：

eventMouseEnter: function (info) {
    $(info.el).tooltip({
          title: info.event.title + '<br />' + info.event._instance.range.start,
          html: true,
          placement: 'top',
          trigger: 'hover',
          container: 'body',
    });
}

在资源时间线中拖动事件时的 FullCalendar 工具提示错误

FullCalendar tooltip bug when dragging event in Resource timeline

javascript

tooltip

fullcalendar