关于 jquery：Twitter Bootstrap 工具提示：放在按钮顶部时会闪烁，但放在左/右/底部时效果很好

我正在处理引导工具提示实例的一些奇怪行为。

我正在使用的页面有几个按钮，当将鼠标悬停在这些按钮上时，会显示带有按钮功能描述的工具提示。工具提示都显示在按钮的顶部，除了一个按钮外，一切正常。这个按钮显示工具提示时会持续闪烁，工具提示本身会覆盖按钮的一部分(而不是完全在按钮顶部)，并阻止按钮被正确单击。如果工具提示的”数据放置”从”顶部”更改为”左”/”右”/”底部”，则工具提示将正确显示。

此外，给我带来问题的按钮被包裹在一个具有”float：right;”的div中在 css 中分配。我之所以提到这一点，是因为我注意到如果我删除浮动，工具提示可以正常工作。不幸的是，如果我移除浮动，按钮本身就会失去正确的定位。

虽然我可以放弃工具提示的”顶部”位置，但我希望有一个简单的技巧可以解决这个问题。有人有什么建议吗？

谢谢。

更新：

这个 StackOverflow 问题与我遇到的问题相同。我发现答案很有用。

添加到工具提示 pointer-events: none; css 规则，如

这将防止工具提示成为鼠标事件的目标并解决问题。

阅读文档

Bootstrap 4 上的文档明确解决了这个问题并提供了解决方案：

Overflow auto and scroll

Tooltip position attempts to automatically change when a parent container has overflow: auto or overflow: scroll like our .table-responsive, but still keeps the original placementa€?s positioning. To resolve, set the boundary option to anything other than default value, ‘scrollParent’, such as ‘window’:

$(‘#example’).tooltip({ boundary: ‘window’ })

所以我们必须将 boundary 选项设置为 ‘window’.

来自 boundary 选项的文档：

Overflow constraint boundary of the tooltip. Accepts the values of ‘viewport’, ‘window’, ‘scrollParent’, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js’s preventOverflow docs.

最佳实践

话虽如此，在任何地方初始化工具提示的首选方法是使用 ‘[data-toggle=”tooltip”]’ 作为选择器：

一劳永逸

现在，如果您正在向 DOM 动态添加或删除元素(带有工具提示)，或者甚至在不重新加载它的情况下替换整个页面(即通过使用像 PJAX 这样的 pushState 库) – 或者如果您只是使用模式 (带有工具提示)-您必须(再次)初始化这些工具提示。

修复元素上的??工具提示

这就是下面的函数派上用场的地方，它会破坏并重新创建所有工具提示。在您向/从已附加工具提示的 DOM 添加/删除元素后调用此函数。

这可能看起来很昂贵(当然确实如此)，但即使在同一页面上有几十个工具提示，我也从未注意到任何性能影响。

修复模态中的工具提示

要修复模式中的工具提示，您只需将上面的函数绑定到 ‘shown.bs.modal’ 事件，该事件会在模式完全显示给用户后触发。

我为我的问题找到了一个快速的解决方案。虽然相对较短，但我最初的工具提示描述被分成两行。偶然地，我尝试缩短工具提示文本以适合单行。完成此操作后，工具提示将正确显示。因此，我假设工具提示文本的长度以及按钮一直显示到页面右侧(以及页面顶部)的事实肯定存在问题。我暂时不会对此进行进一步调查。

我遇到了同样的问题。我发现当这些元素位于具有相对或绝对定位的容器中时，Bootstrap 的工具提示不会正确地将它们定位在”浮动”或”内联/内联块”元素上。我有一个按钮浮动在一个绝对定位的父容器内。如果我删除父级的绝对定位，工具提示会显示得非常好。 Bootstrap 需要解决这个问题。

响应迟了，但我遇到了同样的问题，并且能够通过在 html 元素的工具提示 jquery 参考中使用”容器”选项来解决它。

查看此页面和其中的 jsfiddle 链接。

您可以在此处查看工具提示容器选项的详细信息。

基于史蒂夫的回答，我发现问题在于我对字体真棒 css 的 css 引用是在引导 css 之后。引导 css 将字体真棒图标的显示属性设置为”inline-block”。

所以为了解决这个问题，我只是将 bootstrap css 引用移到 font awesome css 之后，这为我解决了闪烁问题。

这发生在内联元素上，例如 a 标签。将 display 属性设置为 block 可以解决问题。

我不确定您对 Bootstrap 位有多少控制权，但听起来悬停事件一直在触发。阻止这种情况的方法是在调用之前使用 .stop() ，但我不确定这是否可行，例如：

我不知道你是否能够通过 Bootstrap 调用来做类似的事情，但它可能值得一试！