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

Brian Gatarwa · Answer 1 · 2022-05-19T11:58:40.387

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>

I had some trouble with this solution. The problem was, that if you moved the cursor away from the tooltip back to the triggering element, it removed the tooltip, showed the tooltip and removed the tooltip again. You also had to move the cursor away from the triggering element and back to show the tooltip again. I tried to solve it, but in the end I posed a question. This is the updated solution: https://stackoverflow.com/questions/74826591/bootstrap-5-2-prevent-closing-tooltip-if-cursor-is-back-on-triggering-element/74827010#74827010 — WeAreDoomed, Dec 16 '22 at 16:42
@WeAreDoomed, Way better, thanks for the updated solution... — Brian Gatarwa, Dec 28 '22 at 13:06

score 1 · Answer 2 · answered Jun 15 '21 at 20:28

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

I'd suggest getting rid of the jQuery dependency here and use Vanilla JS (as Bootstrap 5 does also not require jQuery anymore). — acme, Sep 29 '21 at 06:44
I found that this code does not render the tooltip at all. They remain big nasty HTNL boxes. :( — MrHinsh - Martin Hinshelwood, Feb 02 '22 at 17:11

score 1 · Answer 3 · answered Oct 25 '21 at 11:30

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

Bootstrap 5: make tooltip hoverable and link clickable

3 Answers3

Linked