bootstrap popover没有显示在所有元素之上

Question

我正在一个bootstrap站点上工作,在从2.0更新到bootstrap 2.2之后,除了popover之外一切正常.

弹出窗口仍然很好,但它们并没有显示在所有其他元素之上.

<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>

任何人都知道为什么弹出窗口的行为发生了变化,或者我如何解决它？谢谢.

Answer 1

我能够通过设置data-container="body"html元素来解决问题

HTML 例:

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript 例:

$('your element').tooltip({ container: 'body' }) 

从这个链接发现:https://github.com/twitter/bootstrap/issues/5889

Answer 2

这对我有用

$().popover({container: 'body'})

Answer 3

我只是遇到了类似的情况,涉及启用滚动的DataTables JQuery库.

结果与Z-indices无关,但是其中一个封闭的div将CSS overflow属性设置为hidden.

我通过向触发popover的元素添加一个事件来修复它,该事件也将负责div的overflow属性更改为visible.

Answer 4

最可能的原因是在弹出窗口上显示的内容有更高z-index.没有精确的代码/风格,我可以提供两种选择:

您应该尝试使用Web检查器(通常是您最喜欢的浏览器上的F12)精确定位元素并检查它们的实际值z-index.

如果您发现该值,你可以将它比酥料饼的低这是z-index: 1010;默认

或者另一种不那么好的方法是增加z-index弹出窗口.您可以使用@zindexPopoverLess文件或直接覆盖来执行此操作

.popover {
    z-index: 1010; /* A value higher than 1010 that solves the problem */
}

如果你找不到解决方案,你应该尝试在这个jsfiddle中复制bug - 你可能会在尝试获取bug时解决问题.

Answer 5

我有一个类似的问题,有2个固定元素 - 即使z-index heirachy是正确的,引导工具提示隐藏在一个元素后面的较低的z-index.

添加data-container="body"解决了问题,现在按预期工作.

Answer 6

如果data-container ="body"不起作用,请尝试其他两个属性:

data-container="body" style="z-index:1000; position:relative"

z-index应该是最大限制.

Answer 7

<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>

上面的答案是有帮助的,因为数据容器中的设置值完成了工作,但如果我设置data-container ="body",那么它在我的情况下不能正确对齐.所以我指定了popover的父div的类,它工作正常.

HTML

数据容器=" testDiv"

JS

$("#testPop").popover({container:'.testDiv'})