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

Question

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

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

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

虽然我可以放弃工具提示的“顶级”定位，但我希望这个问题可能有一个简单的技巧。有没有人有任何建议？

谢谢。

更新

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

Answer 1

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

.tooltip {
  pointer-events: none;
}

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

Answer 2

阅读文档

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

自动溢出并滚动

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

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

因此我们必须将boundary选项设置为'window'。

来自docs on the boundary option：

工具提示的溢出约束边界。接受“视口”，“窗口”，“ scrollParent”或HTMLElement引用的值（仅JavaScript）。有关更多信息，请参阅Popper.js的preventOverflow docs。

最佳做法

话虽这么说，preferred way of initializing tooltips everywhere将使用'[data-toggle="tooltip"]'作为选择器：

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

一劳永逸

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

在元素上修复工具提示

在这里方便使用以下功能，该功能可以销毁并重新创建所有工具提示。在将元素添加到/从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需要解决这个问题。

Answer 5

延迟回复，但我有同样的问题，并且能够通过在html元素的工具提示jquery引用中使用'container'选项来解决它。

请参阅此page及其中的jsfiddle链接。

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

Answer 6

根据史蒂夫的回答，我发现问题是我的CSS引用字体真棒css是 之后 引导程序css。 bootstrap css将字体真棒图标的显示属性设置为“内联块”。

所以为了解决这个问题，我刚刚在字体真棒css之后移动了bootstrap css引用，这为我解决了闪烁的问题。

Answer 7

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

Answer 8

我不确定你对Bootstrap位有多少控制权，但听起来像是悬停事件不断发生。停止此操作的方法是在调用之前使用.stop（），但我不确定这是否可行，例如：

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

我不知道你是否可以通过Bootstrap调用做类似的事情，但是值得尝试一下！