Javascript bootstrap popover 没有显示在所有元素的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14025438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap popover not showing on top of all elements
提问by Kyle
I'm working on a bootstrap site and after updating to bootstrap 2.2 from 2.0 everything worked except the popover.
我正在一个引导程序站点上工作，从 2.0 更新到引导程序 2.2 后，除了弹出窗口之外，一切正常。
The popovers still show up fine, but they don't show up on top of all other elements.
弹出窗口仍然显示良好，但它们不会显示在所有其他元素之上。
<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
<div> //popover shows on top of this
<div> //popover shows on top of this
//link here with popover in it.
</div>
</div>
</div>
Anyone have any idea on why the behavior of the popover changed, or how I can fix it? Thanks.
任何人都知道为什么弹出窗口的行为会发生变化，或者我该如何解决？谢谢。
回答by Kyle
I was able to solve the problem by setting data-container="body"on the html element
我能够通过data-container="body"在 html 元素上设置来解决问题
HTMLexample:
HTML例子：
<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
hover over me
</a>
JavaScriptexample:
JavaScript例子：
$('your element').tooltip({ container: 'body' })
Discovered from this link: https://github.com/twitter/bootstrap/issues/5889
回答by Saqib R.
This is Working for me
这对我有用
$().popover({container: 'body'})
回答by Dologan
I just had a situation that was similar to this, involving the DataTables JQuery library with scrolling enabled.
我刚刚遇到了与此类似的情况，涉及启用了滚动的 DataTables JQuery 库。
What turned out to be had nothing to do with Z-indices, but with one of the enclosing divs having the CSS overflow property set as hidden.
结果证明与 Z 索引无关，而是与其中一个封闭 div 的 CSS 溢出属性设置为隐藏有关。
I fixed it by adding an event to my element triggering the popover which also changed the overflow property of the responsible div to visible.
我通过向我的元素添加一个事件来触发 popover 来修复它，这也将负责 div 的溢出属性更改为可见。
回答by Sherbrow
The most probable cause is that the content displaying over the popover has a higher z-index. Without the precise code/style, I can offer two options :
最可能的原因是弹出窗口上显示的内容具有更高的z-index. 如果没有精确的代码/样式，我可以提供两种选择：
You should try pinpointing the exact elements with a web inspector (usually F12 on your favorite browser) and check their actual z-index.
您应该尝试使用网络检查器（通常在您喜欢的浏览器上按 F12）精确定位元素并检查它们的实际z-index.
If you find this value, you can set it lower than the popoverwhich is z-index: 1010;by default
如果您发现该值，你可以将它设置低于酥料饼这是z-index: 1010;默认
Or the other approach, not as good, would be to increase the z-indexof the popover. You can do that either with the @zindexPopoverin the Less files or directly by overriding
或者另一种不太好的方法是增加z-index弹出窗口的 。您可以使用@zindexPopoverLess 文件中的 或直接通过覆盖来做到这一点
.popover {
z-index: 1010; /* A value higher than 1010 that solves the problem */
}
If you can't find a solution, you should try reproducing the bug in something like this jsfiddle- you will probably resolve the problem while trying to get the bug.
如果您找不到解决方案，您应该尝试在类似jsfiddle 的东西中重现错误- 您可能会在尝试获取错误时解决问题。
回答by Charl Kruger
I had a similar issue with 2 fixed elements - even though the z-index heirachy was correct, the bootstrap tooltip was hidden behind the one element wth a lower z-index.
我有 2 个固定元素的类似问题 - 即使 z-index heirachy 是正确的，引导工具提示隐藏在具有较低 z-index 的一个元素后面。
Adding data-container="body"resolved the issue and now works as expected.
添加data-container="body"解决了问题，现在按预期工作。
回答by Nalan Madheswaran
If data-container="body" not works than try other two properties:
如果 data-container="body" 不起作用，请尝试其他两个属性：
data-container="body" style="z-index:1000; position:relative"
z-index should be max limit.
z-index 应该是最大限制。
回答by Novice_JS
<div class="testDiv">
<a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv">
<i class="fa fa-info-circle"></i>
</a>
</div>
Above answers were helpful as setting value in data-container did the job but if i set data-container="body" then it doesn't align properly in my case. So i specified the class of the parent div of popover and it worked fine.
上面的答案很有帮助，因为在 data-container 中设置值完成了这项工作，但是如果我设置了 data-container="body" 那么它在我的情况下不会正确对齐。所以我指定了 popover 的父 div 的类，它工作正常。
html
html
data-container=".testDiv"
数据容器=".testDiv"
js
js
$("#testPop").popover({container: '.testDiv'})
$("#testPop").popover({容器：'.testDiv'})
回答by Lucian Minea
Many years later, but like me, others may search for this. All updates taking into consideration, all this can be solved with correct initialization options, in JavaScript.
许多年后，但像我一样，其他人可能会搜索这个。考虑到所有更新，所有这些都可以通过 JavaScript 中的正确初始化选项来解决。
$('.tip').tooltip({
boundary: 'viewport',
placement: 'top',
container:'body',
sanitize: true,
appendToBody: true
});
Those settings solved all may issues. I had tooltips flickering, showing corectly only for half of the items on page, jumping from top to left continously, all kinds of wierdness. But with those settings everything is solved. Hope it help anyone looking.
这些设置解决了所有可能的问题。我的tooltip一直在闪烁，页面上只有一半的项目正确显示，从上到左不停地跳，各种奇怪。但是有了这些设置，一切都解决了。希望它可以帮助任何人寻找。
回答by Enkode
This best solution if you are using angular uib-bootsrap is to Use dependency injection for $uibTooltipProvider, you can change the way tooltips and popovers behave by default for all the tooltips.
如果您使用 angular uib-bootsrap，最好的解决方案是对 $uibTooltipProvider 使用依赖注入，您可以更改工具提示和弹出框默认情况下所有工具提示的行为方式。
$uibTooltipProvider.options({
appendToBody: true
});
$uibTooltipProviderThrough the $uibTooltipProvider, you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:
$uibTooltipProvider通过 $uibTooltipProvider，您可以更改默认情况下工具提示和弹出框的行为方式；上述属性始终优先。可以使用以下方法：
setTriggers(obj) (Example: { 'openTrigger': 'closeTrigger' }) - Extends the default trigger mappings mentioned above with mappings of your own.
setTriggers(obj) (Example: { 'openTrigger': 'closeTrigger' }) - 用你自己的映射扩展上面提到的默认触发器映射。
options(obj) - Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the C badge.
options(obj) - 为某些工具提示和弹出窗口属性提供一组默认值。目前支持带有 C 徽章的那些。
回答by Dmitriy Sintsov
Just using
只是使用
$().popover({container: 'body'})
could be not enough when displaying popover over a BootstrapDialog modal, which also uses body as container and has a higher z-index.
在 BootstrapDialog 模态上显示弹出框时可能还不够，它也使用 body 作为容器并具有更高的 z-index。
I come with this fix which uses internals of Bootstrap3 (may not work with 2.x / 4.x) but most of modern Bootstrap installations are 3.x.
我带来了这个修复程序，它使用 Bootstrap3 的内部结构（可能不适用于 2.x / 4.x），但大多数现代 Bootstrap 安装都是 3.x。
self.$anchor.on('shown.bs.popover', function(ev) {
var tipCSS = self.$anchor.data('tipCSS');
if (tipCSS !== undefined) {
self.$anchor.data('bs.popover').$tip.css(tipCSS);
}
// ...
});
Such way different popovers may have different z-index, some are under BootstrapDialog modal, while another ones are over it.
这样不同的popovers可能有不同的z-index，一些在BootstrapDialog模态下，而另一些在它上面。
