Bootstrap 5 Tooltip not triggered when hovering over child element

user_457148 0
Viewed 3665

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.

bootstrap-5 twitter-bootstrap tooltip javascript
2 Answers
Admin1

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.

user_9728280
Related