将鼠标悬停在子元素上时未触发 Bootstrap 5 工具提示答案

【问题标题】：Bootstrap 5 Tooltip not triggered when hovering over child element将鼠标悬停在子元素上时未触发 Bootstrap 5 工具提示
【发布时间】：2020-06-30 12:59:47
【问题描述】：

我正在使用 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 图标作为伪元素来解决这个问题。不过，如果有人有解决方案，我仍然很想知道。

【问题讨论】：

标签： javascript twitter-bootstrap tooltip bootstrap-5

【解决方案1】：

您的问题看起来像 https://github.com/twbs/bootstrap/issues/31324，并且已由 https://github.com/twbs/bootstrap/pull/30928 在 Bootstrap 5 alpha 2 中修复。

Bootstrap 5 alpha 1 的解决方法是 https://github.com/twbs/bootstrap/issues/31080#issuecomment-645544440：

.fas {
  z-index: -1;
}

【讨论】：

【解决方案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。

【讨论】：