I have fixed 2 problems on @Brian Gatarwa's answer:
function activate_tooltip(){
const tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
trigger: "manual",
});
let tooltipTimeout;
let currentToolTip;
tooltipTriggerEl.addEventListener("mouseenter", function () {
let toolTipID;
// Clear Set Timeout
clearTimeout(tooltipTimeout);
toolTipID = tooltipTriggerEl.getAttribute("aria-describedby");
if (toolTipID!=null){
// tooltipTriggerEl 'mouseenter' will be triggered again, when mouse moved back from currentToolTip
// so we need to check if currentToolTip exits;
return;
}
// 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 () {
if (!tooltipTriggerEl.matches(":hover")) { // when mouseleave currentToolTip, we need to check if tooltipTriggerEl is on hover
tooltip.hide();
};
});
});
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;
});
};