2

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

4

2 回答 2

0

您的问题看起来像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;
}
于 2020-09-17T03:50:24.997 回答
-1

您使用以下代码：

<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-togglevs.data-bs-toggle和data-placementvs data-bs-placement.。

于 2021-06-23T13:30:30.683 回答