TLDR: The tooltip flickers when moving the cursor from the tooltip back to the triggering element.
I want the tooltips to open on hover and be clickable. I found a solution that works on Stack Overflow here.
When you hover over an element, a tooltip appears that can be interacted with. Once you move the cursor away from the tooltip, it closes.
However, there is a problem.
If you leave the tooltip and then move the cursor back to the element that triggered it, the tooltip reappears but then disappears after a moment (flickering). You have to move the cursor away from the element and then back to it for the tooltip to show again.
My goal is to check if the cursor is back on the triggering element and if so, not run the closing function (tooltip.hide()).
I tried to achieve this by following the process in the example from Stack Overflow. That is, checking if the tooltip has lost :hover, using a setTimeout (300ms), and then checking if the cursor is back on the triggering element or the tooltip.
Here is a working example on jsFiddle.
This is the code. The issue lies between the two long comment lines.
Note: Even moving the cursor away from the triggering element and back triggers the flickering issue.
//https://stackoverflow.com/questions/67993080/bootstrap-5-make-tooltip-hoverable-and-link-clickable
var tooltipTriggerList = [].slice.call(document.querySelectorAll('button'))
for (let tt of tooltipTriggerList){
tt.setAttribute("data-bs-placement","top")
}
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
trigger: "manual",
'customClass': 'custom-tooltip'
})
let tooltipElTimeout;
let currentToolTip;
let currentTooltipTimeout;
tooltipTriggerEl.addEventListener("mouseenter", function () {
let toolTipID;
// Clear Set Timeout
clearTimeout(currentTooltipTimeout);
// Show Tooltip
tooltip.show();
// Assign current tooltip ID to toolTipID variable
toolTipID = tooltipTriggerEl.getAttribute("aria-describedby");
// Assign current tooltip to currentToolTip variable
currentToolTip = document.querySelector(`#${toolTipID}`);
/*******************************************************************/
// Hide tooltip on tooltip mouse leave
currentToolTip.addEventListener("mouseleave", function () {
currentTooltipTimeout = setTimeout(()=>{
console.log("!currentToolTip.matches(':hover')");
console.log(!currentToolTip.matches(":hover"));
if(!tooltipTriggerEl.matches(":hover")){
console.log("!tooltipTriggerEl.matches(':hover')");
console.log(!tooltipTriggerEl.matches(":hover"));
if (!currentToolTip.matches(":hover")) {
tooltip.hide();
}
}
}, 300)
});
/***********************************************************************/
});
tooltipTriggerEl.addEventListener("mouseleave", function () {
// SetTimeout before tooltip disappears
tooltipTimeout = setTimeout(function () {
// Hide tooltip if not hovered.
if (!currentToolTip.matches(":hover")) {
tooltip.hide();
}
}, 100);
});
return tooltip;
})
Thank you
Edit:
Amine Ramouls answer is correct. isHidden also needs to bet set to false on the 2cnd eventListener, otherwise the tooltips no longer work (problem with aria-describedby).