36

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

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

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

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

谢谢你。

更新：

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

4

8 回答 8

83

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

.tooltip {
  pointer-events: none;
}

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

于 2018-02-07T13:43:14.833 回答
18

阅读文档

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 添加/删除元素后调用此函数。

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();
});
于 2020-05-29T00:45:09.287 回答
9

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

于 2013-01-14T22:08:14.600 回答
5

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

于 2015-01-21T23:18:28.953 回答
3

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

请参阅此页面和其中的 jsfiddle 链接。

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

于 2015-06-09T15:47:06.973 回答
2

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

于 2013-09-24T11:39:11.787 回答
2

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

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

于 2014-02-27T08:53:58.617 回答
0

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

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

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

于 2013-01-14T21:32:04.330 回答