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

问题描述

我正在开发一个引导站点，并从 2.0 之后更新到 bootstrap 2.2，除了 popover 之外，所有工作都有效。

popovers 仍然显示良好，但它们不会显示在所有其他元素之上。

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

任何人都知道为什么 popover 的行为改变了，或者我如何解决它？谢谢。

最佳解决方案

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

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

次佳解决方案

这是为我工作

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

第三种解决方案

我只是有一个这样的情况，涉及启用滚动的 DataTables JQuery 库。

原来与 Z-indices 没有任何关系，但是其中一个包含 CSS overflow 属性的 div 设置为隐藏。

我通过向我的元素添加一个事件来触发 popover 来修复它，这也改变了负责的 div 的 overflow 属性为 visible 。

第四种方案

最可能的原因是在 popover 上显示的内容有更高的 z-index 。没有准确的代码/样式，我可以提供两个选择：

您应该尝试使用 Web 检查器 (通常在最喜爱的浏览器上使用 F12) 精确确定元素，并检查其实际的 z-index 。

如果找到该值，则可以将其设置为低于默认为 z-index: 1010; 的 popover

或者另一种方法，不是那么好，将会增加 Popover 的 z-index 。您可以使用 @zindexPopover 在 Less 文件中或直接通过覆盖

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

如果找不到解决方案，您应该尝试在 this jsfiddle 中重现错误 – 您可能会在尝试获取错误时解决问题。

第五种方案

我有一个类似的问题与 2 个固定元素 – 即使 z-index heirachy 是正确的，引导工具提示隐藏在一个元素的下面的 z-index 之后。

添加 data-container="body"解决了这个问题，现在正常工作。

第六种方案

如果 data-container = “body” 不能尝试其他两个属性：

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

z-index 应该是最大限度。

参考文献

bootstrap popover not showing on top of all elements

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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