I am currently using FullCalendar v6 with the resourceTimeGridDay feature.
Within the 'eventDidMount' event render hook, I have implemented a JS function to display popovers on each event for showing event details. The popover is set to appear on hover and remain visible until the mouse moves out of the area. However, I encountered an issue where the popover triggers for events underneath it, causing interference with the original popover interaction...
Despite facing this challenge, I believe I may have overused popovers! Below is the code that is invoked by 'eventDidMount':
function eventPopover(event) {
$(function () {
$(event.el).popover({
title: 'the title2',
content: 'content',
placement: 'bottom',
html: true,
trigger: 'manual',
animation: true,
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
})
}
In response to Meghshyam Sonar's answer, here is what followed: