悬停在子元素上时未触发 Bootstrap 5 工具提示

Question

I'm using Bootstrap 5 and I'm trying to trigger a tooltip when I hover over an anchor tag which contains a Fontawesome Icon. However, when I hover over the part of the tag where the icon sits, the tooltip hides.

I have the following anchor tag:

<a href="https://twitter.com/mytwitterhandle" target="_blank" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
    Hovering over text will trigger the tooltip but it is removed when hovering over the icon... 
    <i class="fab fa-fw fa-twitter" aria-label="Visit Twitter Page" data-original-title="" title=""></i>
</a>

Here's the javascript to trigger it (taken from the official docs):

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

Any ideas?

EDIT!

OK, so I got around this by inserting the Fontawesome icon as a pseudo element. Would still be interested to hear if anyone has a solution though.

Answer 1

Your issue looks like https://github.com/twbs/bootstrap/issues/31324 and has been fixed in Bootstrap 5 alpha 2 by https://github.com/twbs/bootstrap/pull/30928 .

A workaround for Bootstrap 5 alpha 1 is https://github.com/twbs/bootstrap/issues/31080#issuecomment-645544440 :

.fas {
  z-index: -1;
}

Answer 2

You use this code:

<a href="https://twitter.com/mytwitterhandle"
  target="_blank"
  data-toggle="tooltip"
  data-placement="top"
  title=""
  data-original-title="Tooltip on top">

But need to use this:

<a href="https://twitter.com/mytwitterhandle"
  target="_blank"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  title=""
  data-original-title="Tooltip on top">

Difference is data-toggle vs. data-bs-toggle and data-placement vs. data-bs-placement .