Всплывающая подсказка Bootstrap 5 не запускается при наведении курсора на дочерний элемент

Question

Я использую Bootstrap 5 и пытаюсь вызвать всплывающую подсказку при наведении курсора на тег привязки, содержащий значок Fontawesome. Однако при наведении курсора на ту часть тега, где находится значок, всплывающая подсказка скрывается.

У меня есть следующий тег привязки:

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

Вот код javascript для его запуска (взят из официальных документов):

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

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

Есть идеи?

РЕДАКТИРОВАТЬ!

Хорошо, я обошел это, вставив значок Fontawesome в качестве псевдоэлемента. Тем не менее, было бы интересно услышать, есть ли у кого-нибудь решение.

Answer 1

Ваша проблема выглядит как https://github.com/twbs/bootstrap/issues/31324 и была исправлена ​​в Bootstrap 5 alpha 2 по https://github.com/twbs/bootstrap/pull/30928.

Обходной путь для Bootstrap 5 alpha 1 - https://github.com/twbs/bootstrap/issues/31080#issuecomment-645544440:

.fas {
  z-index: -1;
}

Answer 2

Вы используете этот код:

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

Но нужно использовать это:

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

Разница data-toggle против. data-bs-toggle а также data-placement против. data-bs-placement.