【问题标题】：Twitter Bootstrap Tooltip: flickers when placed on top of button, but works fine when placed at the left/right/bottomTwitter Bootstrap 工具提示：放在按钮顶部时会闪烁，但放在左/右/底部时可以正常工作
【发布时间】：2013-01-14 21:10:55
【问题描述】：

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

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

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

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

谢谢。

更新：

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

【问题讨论】：

你能把按钮包裹在一个向右浮动的元素中并且不浮动按钮吗？看看能不能解决？您可以将它放在一个元素（段落、div 等）中，而不是向右浮动，然后将其文本对齐以使其获得所需的位置吗？
按钮实际上被包裹在一个向右浮动的元素中 - 很抱歉不清楚这一点。 css 本身相当混乱；我正在处理来自 3 个不同主干视图的元素，并且正确地对它们进行排序被证明是非常乏味的。在尝试了几种方法后，我决定使用当前的 css，这可以解决问题，但很可能不是最优的。由于时间限制，如果解决方案不需要重大的 CSS 更改，那将是更好的选择。
如果你已经解决了，我建议1）发布解决方案并自己标记它；或 2) 删除此问题。祝项目顺利。
我也有同样的问题，但仅限于 Chrome 浏览器，当工具提示位于 iframe 内时。

标签： jquery twitter-bootstrap tooltip

【解决方案1】：

在工具提示中添加pointer-events: none;css 规则，点赞

.tooltip {
  pointer-events: none;
}

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

【讨论】：

干净、直接、魅力十足。谢谢！
如果工具提示被添加到超链接怎么办？这会取消它的点击动作吗？
这完全解决了我的问题 - 谢谢！

【解决方案2】：

阅读文档

docs on Bootstrap 4 明确解决了这个问题并提供了解决方案：

溢出自动和滚动

当父容器溢出时，工具提示位置会尝试自动更改：自动或溢出：像我们的 .table-responsive 一样滚动，但仍保持原始位置的位置。要解决此问题，请将边界选项设置为默认值“scrollParent”以外的任何值，例如“window”：

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

所以我们必须将boundary 选项设置为'window'。

来自docs on the boundary option：

工具提示的溢出约束边界。接受 'viewport'、'window'、'scrollParent' 或 HTMLElement 引用的值（仅限 JavaScript）。更多信息请参考 Popper.js 的preventOverflow docs。

最佳实践

话虽如此，preferred way of initializing tooltips everywhere 是使用'[data-toggle="tooltip"]' 作为选择器：

$('[data-toggle="tooltip"]').tooltip({ boundary: 'window' })

一劳永逸

现在，如果您正在向 DOM 动态添加或删除元素（带有工具提示），或者甚至在不重新加载的情况下替换整个页面（即使用 pushState 库，如 PJAX） - 或者如果您只是使用modals (with tooltips) - 你必须初始化那些工具提示（再次）。

修复元素上的工具提示

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

function recreateTooltips() {
    $('[data-toggle="tooltip"]').tooltip('dispose').tooltip({boundary: 'window'});
}

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

修复模式中的工具提示

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

/** Recreate tooltips upon showing modal */
$(document).on('shown.bs.modal', '*', function () {
    recreateTooltips();
});

【讨论】：

添加边界对我有用
这个解决方案听起来不错，但它不起作用（Bootstrap 4.5）

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

查看page 和其中的 jsfiddle 链接。

您可以看到工具提示容器选项详细信息here。

【讨论】：

【解决方案6】：

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

【讨论】：

同样，我可以通过将属性 (container="body") 添加到我的按钮来解决此问题。

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

$('#myelement').stop().fadeOut(200);

我不知道您是否能够通过 Bootstrap 调用执行类似的操作，但值得一试！

【讨论】：

阅读文档

最佳实践

一劳永逸

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

修复模式中的工具提示

修复元素上的工具提示