Bootstrap 5: make tooltip hoverable and link clickable

Question

Sometimes you want to include links in the tooltips and make them clickable. Since I did not found any good answer for bootstap 5 and took me some time to figure out I want to share it.

The default Bootstrap 5 tooltip initialization looks like this:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        
new bootstrap.Tooltip(tooltipTriggerEl);

How is it possible to keep the tooltip visible, while you hover over it (and dehover the original element)?

Answer 1

I've modified @V1Pr's answer and came up with a Vanilla JS approach:

 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);

      // 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 () {
        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;
  });

The HTML :

<span data-bs-toggle="tooltip" data-bs-html="true" title="Check out <a class='text-white opacity-75' href='#'>this link</a>">
 <i class="bi bi-info-square"></i>
</span>