javascript - 将鼠标悬停在子元素上时不会触发 Bootstrap 5 工具提示

Question

我正在使用 Bootstrap 5，当我将鼠标悬停在包含 Fontawesome 图标的 anchor 标记上时，我试图触发工具提示。但是，当我将鼠标悬停在图标所在的标签部分时，工具提示会隐藏。

我有以下 anchor 标签:

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