I have a Tippy.js integrated into a FullCalendar.js calendar. While dragging an event inside the calendar, the tooltips get crazy, losing reference to the event that triggered it.
I think the issue is that I'm creating the Tippy (tooltip) instance inside the eventDidMount
hook, and this being call while dragging every time the dragged event is snaped to a calendar cell, and that is why it triggers lots of tooltips in the process.
Fullcalendar has a hook for eventDragStart(eventInfo)
but I don't know how to get to the attached tippy instance to hide it. Or should I prevent creating a tooltip at all while dragging instead?
//Other FullCalendar Initialization
...
eventDidMount: function(info) {
tippy(info.el, {
interactive: true,
delay: 300,
theme: 'light-border',
maxWidth: 400,
allowHTML: true,
appendTo: document.getElementById('mainContent'),
content(reference) {
//Tooltip content
return tempRendered;
},
});
}
eventDragStart(info){
//I SUPPOSE HERE I SHOULD DO SOMETHING TO HIDE THE TIPPY TOOLTIP
}
Any ideas?
Well, I finally found the way to fix this in FullCalendar, not in Tippy.
I set an _isDragging
property on the event inside the eventDragStart hook:
eventDragStart: function(info) {
calendarInstance.getEventById(info.event.id).setExtendedProp( "_isDragging", true );
},
That way, I can check this flag inside the eventDidMount
hook and prevent the creation of the Tippy tooltip.
eventDidMount: function(info) {
const isDragging =
calendarInstance.getEventById(info.event.id).extendedProps._isDragging;
if (isDragging != null && isDragging) {
return;
}
...
// Tippy Init
},
IMPORTANT: I'm setting the _isDragging property directly to the event instance inside the Calendar instance, because of the info.event args these hooks receive don't have the properties created on the fly. Or at least I didn't find a way to make it work.