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

If you want to enable tooltip hovering, modify it to the following:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        
    new bootstrap.Tooltip(tooltipTriggerEl,{ trigger: 'manual' });
      
    $(tooltipTriggerEl).on("mouseenter", function () {
        var _this = this;
        $(this).tooltip("show");
        $(".bs-tooltip-start").on("mouseleave", function () {
            $(_this).tooltip('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".bs-tooltip-start:hover").length) {
               $(_this).tooltip("hide");
            }
        }, 300);
    });
});

Don't forget to add data-bs-html=true to the element, if you want to include any HTML in the tooltip ;)

Answer 2

You need to put the tooltip in the same container with the element.

<div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Test string">
    <button>Test</button>
</div>

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

Answer 3

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>