twitter-bootstrap Twitter Bootstrap 工具提示：放置在按钮顶部时闪烁，但放置在左侧/右侧/底部时效果很好

Twitter Bootstrap Tooltip: flickers when placed on top of button, but works fine when placed at the left/right/bottom

提问by AndraD

I am dealing with some weird behavior for an instance of bootstrap's tooltip.

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

The page I am working with has several buttons that, when hovered over, display tooltips with the description for the buttons' functionality. The tooltips are all displayed on top of the buttons, and, with the exception of one button, everything works fine. This one button displays the tooltip with a continuous flickering, the tooltip itself covers part of the button (instead of being completely on top of the button), and prevents the button from being properly clicked. If the "data-placement" for the tooltip is changed from "top" to "left"/"right"/"bottom", the tooltip is displayed correctly.

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

Additionally, the button that gives me problems is wrapped in a div that has "float: right;" assigned in the css. I am mentioning this because I noticed that if I remove the float, the tooltip works fine. Unfortunately, if I remove the float, the button itself loses its correct positioning.

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

While I could give up the "top" positioning for the tooltip, I was hoping that there might be an easy trick to this problem. Does anyone have any suggestions?

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

Thank you.

谢谢你。

Update:

更新：

This StackOverflow questionpresents the same problem as the one I was encountering. I found the answer useful.

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

采纳答案by AndraD

I found a quick solution for my problem. Although relatively short, my initial tooltip description was getting split on two lines. By chance, I tried shortening the tooltip text to fit on a single line. Once this was done, the tooltip was properly displayed. Therefore, I am assuming there must be a problem with the length of the tooltip text and the fact that the button is displayed all the way to the right of the page (and at the top of the page). I will not investigate this further for the time being.

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

回答by DicBrus

Add to the tooltip pointer-events: none;css rule, like

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

.tooltip {
  pointer-events: none;
}

This will prevent tooltip from being target for mouse events and will resolve the issue.

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

回答by Eric

I was having this same issue. I found that Bootstrap's tooltips do not position themselves correctly over "floated" or "inline/inline-block" elements when those elements are within a container with relative or absolute positioning. I have a button floated right, inside an absolutely positioned parent container. If I remove the absolute positioning of the parent, the tooltip displays perfectly fine. Bootstrap needs to address this.

我遇到了同样的问题。我发现 Bootstrap 的工具提示在“浮动”或“内联/内联块”元素位于具有相对或绝对定位的容器内时无法正确定位这些元素。我有一个向右浮动的按钮，位于绝对定位的父容器内。如果我删除父项的绝对定位，则工具提示显示得非常好。Bootstrap 需要解决这个问题。

回答by tnschmidt

Late response, but I had this same issue and was able to resolve it by using the 'container' option in the tooltip jquery reference on the html element.

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

See this pageand the jsfiddle link therein.

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

You can see the tooltip container option details here.

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

回答by ptutt

Building on Steve's answer, I found the issue was that my css reference to the font awesome css was afterthe bootstrap css. The bootstrap css sets the display property for font awesome icons to be "inline-block".

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

So to fix the issue I just moved the bootstrap css reference after the font awesome css and this fixed the flickering issue for me.

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

回答by Steve Parish

This happens on inline elements, such as atags. Setting the displayproperty to blockresolves the issue.

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

回答by James Donnelly

I'm not sure how much control you have over Bootstrap bits, but it sounds like the hover event is constantly firing. The way to stop this would be to use .stop() before the call, but I'm not sure if that's possible here, for example:

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

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

I don't know if you're able to do something like that with the Bootstrap call, but it may be worth giving it a try!

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

回答by Tobias Wicker

Read The Docs

阅读文档

The docs on Bootstrap 4explicitly address this issue and also provide a solution:

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 placement's positioning. To resolve, set the boundary option to anything other than default value, 'scrollParent', such as 'window':

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

溢出自动和滚动

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

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

So we have to set the boundaryoption to 'window'.

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

From the docs on the boundaryoption:

从选项的文档中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.

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

Best Practice

最佳实践

That being said, the preferred way of initializing tooltips everywhereis to use '[data-toggle="tooltip"]'as selector:

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

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

Once And For All

一劳永逸

Now if you are dynamically adding or removing elements (with tooltips) to the DOM or are even replacing the whole page without reloading it (i.e. by using a pushStatelibrary like PJAX) - or if you are just using modals (with tooltips) - you have to initialize those tooltips (again).

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

Fixing Tooltips On Elements

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

That's where the following function comes in handy, which destroys and recreates all tooltips. Call this function after you've added / removed an element to / from the DOM that has / had a tooltip attached.

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

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

This might seem expensive (and certainly is), but I've never noticed any performance impact even with dozens of tooltips on the same page.

这可能看起来很昂贵（而且肯定是），但即使在同一页面上有数十个工具提示，我也从未注意到任何性能影响。

Fixing Tooltips In Modals

在模态中修复工具提示

To fix tooltips in modals, you simply bind the function from above to the 'shown.bs.modal'event, which fires after a modal is fully shown to the user.

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

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