Question

我正在使用JavaScript FullCalendar库构建日历。现在更新我的代码以与FullCalendar V4一起使用。在资源时间轴视图中拖动事件时，工具提示无法按预期工作（拖动时显示重复的工具提示）。仅在资源时间轴视图中发生此问题，在dayGrid视图中不发生。我已经附上了两个Codepen代码。 Daygrid视图可以正常工作，但Resource timeline视图则不能。
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

或使用像这样的引导程序的工具提示：

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工具提示错误

2 个答案: