bootstrap popover 没有显示在所有元素的顶部

IT技术 javascript html twitter-bootstrap popover
2021-03-11 18:46:29

我正在一个引导程序站点上工作，从 2.0 更新到引导程序 2.2 后，除了弹出窗口之外，一切正常。

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

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

任何人都知道为什么弹出窗口的行为会发生变化，或者我该如何解决？谢谢。

6个回答

我能够通过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

@NoBrainer 似乎找不到它的新链接，但是将 data-container="body" 添加到 html 元素应该可以工作，或者通过 javascript 传入容器：'body' 也应该可以工作
2021-04-21 18:46:29
我得到了那个链接的 404。请更新？
2021-04-23 18:46:29
这真的很有帮助。我在弹出窗口初始化中进行了以下更改并且它起作用了： $('#element').popover({ container: 'body', //other parameters });
2021-04-26 18:46:29
添加 data-container="body" 似乎也适用于引导程序 3 以及工具提示，例如当它们处于溢出状态时
2021-04-28 18:46:29
虽然这解决了最初的 z-index 问题，但是一旦您开始在屏幕上拖动内容、放大或缩小或调整窗口大小，弹出框就不会与原始触发器元素保持一致。自己为此寻找更好的答案。
2021-05-20 18:46:29

这对我有用

$().popover({container: 'body'})
这对我也有用。了解需要为“容器”属性设置什么值很重要。仅供参考，从 bootstrap popovers 文档复制的内容 - “当您在父元素上有一些样式会干扰 popover 时，您需要指定一个自定义容器，以便 popover 的 HTML 出现在该元素中。”
2021-05-16 18:46:29

我刚刚遇到了与此类似的情况，涉及启用了滚动的 DataTables JQuery 库。

结果证明与 Z 索引无关，而是与其中一个封闭 div 的 CSS 溢出属性设置为隐藏有关。

我通过向我的元素添加一个事件来触发弹出框来修复它，这也将负责 div 的溢出属性更改为可见。

你是救命稻草！！我读到的所有答案都是关于 z-index 的，老实说，这是唯一对我有意义的答案，但最后，在我决定尝试与 z-index 无关的答案之前，这些建议都没有用！谢谢
2021-05-07 18:46:29

最可能的原因是弹出窗口上显示的内容具有更高的z-index. 如果没有精确的代码/样式，我可以提供两种选择：

您应该尝试使用网络检查器（通常在您最喜欢的浏览器上按 F12）精确定位元素并检查它们的实际z-index.

如果您发现该值，你可以将它设置低于酥料饼这是z-index: 1010;默认

或者另一种不太好的方法是增加z-index弹出窗口的 。您可以使用@zindexPopoverLess 文件中的 或直接通过覆盖来做到这一点

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

如果您找不到解决方案，您应该尝试在类似jsfiddle 的东西中重现错误- 您可能会在尝试获取错误时解决问题。

感谢您指出弹出窗口的默认 z-index 值。
2021-04-27 18:46:29
如果我没有找到它，我会尝试制作一个 jsfiddle 并回发，但我尝试将 popover 设为 9999 的 z-index，但没有运气。
2021-05-19 18:46:29

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

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

其它你可能感兴趣的问题
上一篇Lodash _.pluck 怎么了？ 下一篇在 Jest 中模拟按钮点击