Twitter Bootstrap工具提示:放置在按钮顶部时闪烁,但放置在左/右/底部时工作正常

Question

我正在处理一些bootstrap工具提示实例的奇怪行为.

我正在使用的页面有几个按钮,当悬停在上面时,显示工具提示以及按钮功能的描述.工具提示全部显示在按钮顶部,除一个按钮外,一切正常.这一个按钮显示工具提示连续闪烁,工具提示本身覆盖按钮的一部分(而不是完全位于按钮顶部),并防止按钮被正确点击.如果工具提示的"数据放置"从"顶部"更改为"左侧"/"右侧"/"底部",则工具提示将正确显示.

另外,给我带来问题的按钮包含在一个"浮动:正确"的div中.在css中分配.我提到这个因为我注意到如果我删除浮动,工具提示工作正常.不幸的是,如果我移除浮子,按钮本身会失去正确的位置.

虽然我可以放弃工具提示的"顶级"定位,但我希望这个问题可能有一个简单的技巧.有没有人有什么建议？

谢谢.

更新:

这个StackOverflow问题提出了与我遇到的问题相同的问题.我发现答案很有用.

Answer 1

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

.tooltip {
  pointer-events: none;
}

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

Answer 2

阅读文档

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

溢出自动和滚动

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

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

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

从选项的文档中boundary：

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

最佳实践

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

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

一劳永逸

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

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

这就是以下函数派上用场的地方，它会破坏并重新创建所有工具提示。在您向/从 DOM 添加/删除元素后调用此函数，该 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();
});

Answer 3

我找到了解决问题的快速解决方案.虽然相对较短,但我最初的工具提示说明分为两行.偶然的机会,我尝试缩短工具提示文本以适应单行.完成此操作后,工具提示已正确显示.因此,我假设工具提示文本的长度一定存在问题,并且按钮一直显示在页面右侧(并在页面顶部).我暂时不会对此进一步调查.

Answer 4

我遇到了同样的问题。我发现，当Bootstrap的工具提示处于相对或绝对位置的容器内时，Bootstrap的工具提示无法正确地将自身定位在“浮动”或“内联/内联块”元素上。我在一个绝对定位的父容器内向右浮动了一个按钮。如果我删除了父对象的绝对位置，则工具提示将显示得很好。引导程序需要解决这个问题。