79379703

Date: 2025-01-23 02:58:15
Score: 0.5
Natty:
Report link

I have fixed 2 problems on @Brian Gatarwa's answer:

  1. tooltipTriggerEl 'mouseenter' will be triggered again, when mouse moved back from currentToolTip, so we need to check if currentToolTip exits;
  2. when mouseleave currentToolTip, we need to check if tooltipTriggerEl is on hover.
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;
  });
};
Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Brian
  • Low reputation (1):
Posted by: Xiaohang Hu