bootstrappopup窗口不显示在所有元素的顶部
我正在引导站点上工作，并从2.0升级到bootstrap 2.2之后，除了popup窗口以外，所有工作都已经完成。
虽然这些东西还是显示出来的，但是它们并没有显示出所有其他元素。
<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-index没有任何关系，但是其中一个封闭的div将CSS溢出属性设置为隐藏。
我通过向我的元素添加一个事件来解决这个问题，这个事件触发了popover，这也将负责的div的overflow属性改变为visible。
最有可能的原因是显示在popup窗口上的内容具有更高的z-index 。 没有准确的代码/风格，我可以提供两种select：
您应该尝试使用Web检查器（通常是您最喜欢的浏览器上的F12）来查明确切的元素，并检查其实际的z-index 。
如果你发现这个值，你可以设置它低于 z-index: 1010; 的popup z-index: 1010; 默认
或者另一种方法，不是那么好，就是增加popover的z-index 。 您可以使用Less文件中的@zindexPopover或直接覆盖
.popover { z-index: 1010; /* A value higher than 1010 that solves the problem */ }
如果你找不到解决scheme，你应该尝试在这个jsfiddle这样的东西上重现bug – 你可能会解决这个问题，同时试图找出 bug。
我有一个与2个固定元素类似的问题 – 即使z-index是正确的，引导工具提示被隐藏在一个元素和较低的z-index之后。
添加data-container="body"解决了这个问题，现在按预期工作。
如果数据容器=“身体”不工作比尝试其他两个属性：
data-container="body" style="z-index:1000; position:relative"
z-index应该是最大限制。
如果您使用的是angular度uib-bootsrap，这个最好的解决scheme是为$ uibTooltipProvider使用dependency injection，您可以改变所有工具提示默认的工具提示和popup方式。
$uibTooltipProvider.options({ appendToBody: true });
$ uibTooltipProvider通过$ uibTooltipProvider，你可以改变默认的工具提示和popup窗口的行为方式; 上面的属性总是优先。 以下方法可用：
setTriggers （obj）（例如：{'openTrigger'：'closeTrigger'}） – 将上面提到的默认触发器映射与您自己的映射进行扩展。
options （obj） – 为某些工具提示和popup窗口属性提供一组默认值。 目前支持C徽章。
只是使用
$().popover({container: 'body'})
在BootstrapDialog模式上显示popup窗口时，可能还不够，该窗口也使用body作为容器并具有较高的z-index。
我使用了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); } // ... });
这种方式不同的弹窗可能有不同的z-index，有些是在BootstrapDialog模式下，而另外一些则在其上。
在我的情况下，我不得不使用popover模板选项，并添加我自己的CSS类到模板html：
$("[data-toggle='popover']").popover( { container: 'body', template: '<div class="popover top-modal" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' });
CSS：
.top-modal { z-index: 99999; }
<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>
以上答案是有用的，因为设置值的数据容器做的工作，但如果我设置数据容器=“身体”，那么它不正确alignment在我的情况。 所以我指定popover的父div的类，它工作正常。
HTML
数据容器=“ testDiv”
JS
$（“＃testPop”）。popover（{container：'.testDiv'}）
这可能与variables无关的z-index主列表有关。 一般来说，确保你的variables.less文件是正确的并且是最新的。
