2

I'm using JavaScript FullCalendar library to build my calendar. Now updating my codes to work with FullCalendar V4. When Dragging event in resource timeline view, the tooltip does not work as expected (duplicate tooltips show when dragging). This issue only happens in resource timeline view, not in dayGrid view. I've attached two codepen codes. Daygrid view works fine, but Resource timeline view does not.
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'
      });
    },
Vincent
  • 59
  • 6

3 Answers3

1

When dragging the event it gets re-rendered each time, so basically you are recreating a new tooltip each time thus creating multiple instances which in turn loose their reference to the element that gets destroyed hence it's odd placement. I would suggest to hook into "eventMouseEnter" and "eventMouseLeave" callbacks and create and destroy a single tooltip object there. Here is an example:

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

SunnyDark
  • 291
  • 1
  • 3
  • 9
  • 1
    Thanks for your update. I found your solution works fine with dayGrid view, but not resource Timeline view. Using eventMouseEnter and eventMouseLeave in my second codepen example above makes glitch when dragging dropping event. However if I use eventMouseEnter without eventMouseLeave in resouce Timeline view, it works perfectly. I don't know why, but it just works... – Vincent Aug 26 '19 at 15:48
0

Or use bootstrap's tooltip like this :

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

This will remove the tooltip class applied for events on the full calendar.

eventContent: function (event, element) 
{
  $('.tooltip').remove();
},
Deepak Singh
  • 749
  • 4
  • 16
Abhijeet Sonar
  • 1