我在引导站点上工作，并且从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>任何人都对为什么弹出式窗口的行为有所更改或如何解决有任何想法？谢谢。
Answers:
我可以通过设置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' }) 这对我有用
$().popover({container: 'body'})我只是遇到了类似的情况，涉及到启用了滚动的DataTables JQuery库。
原来与Z索引无关，而是与其中一个封闭的div的CSS溢出属性设置为隐藏的。
我通过将事件添加到触发弹出框的元素中来解决此问题，该事件也将负责div的overflow属性更改为visible。
最可能的原因是在弹出框上显示的内容更高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的方式重现该错误-您可能会在尝试获取该错误的同时解决该问题。
我有2个固定元素的类似问题-即使z-index heirachy是正确的，bootstrap工具提示也隐藏在具有较低z-index的一个元素后面。
添加data-container="body"解决了该问题，现在可以正常运行。
如果data-container =“ body”不起作用，请尝试其他两个属性：
data-container="body" style="z-index:1000; position:relative"z-index应该是最大限制。
<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中设置值可以完成这项工作，但是如果我设置data-container =“ body”，则在我的情况下无法正确对齐。所以我指定了popover的父div的类，并且工作正常。
html
data-container =“。testDiv”
js
$（“＃testPop”）。popover（{container：'.testDiv'}）
如果您使用angular uib-bootsrap，最好的解决方案是对$ uibTooltipProvider使用依赖项注入，默认情况下，您可以更改所有工具提示的工具提示和弹出窗口行为。
$uibTooltipProvider.options({
appendToBody: true
});$ uibTooltipProvider 通过$ uibTooltipProvider，您可以更改默认情况下工具提示和弹出窗口的行为。上面的属性始终优先。可以使用以下方法：
setTriggers（obj）（示例：{'openTrigger'：'closeTrigger'}）-使用您自己的映射扩展上述默认触发器映射。
options（obj）-为某些工具提示和弹出窗口属性提供一组默认值。目前支持带有C徽章的。
许多年后，但像我一样，其他人可能会搜索这个。考虑到所有更新，所有这些都可以通过JavaScript中正确的初始化选项来解决。
$('.tip').tooltip({
boundary: 'viewport',
placement: 'top',
container:'body',
sanitize: true,
appendToBody: true
});这些设置解决了所有可能的问题。我的工具提示闪烁，只显示页面上一半的内容，从上到下连续跳动，各种感觉。但是有了这些设置，一切都解决了。希望它能帮助任何寻找的人。
只是使用
$().popover({container: 'body'})在BootstrapDialog模式上显示弹出窗口时，可能还不够，该模式也使用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 template选项，并将自己的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;
}Problem solved with data-container="body" and z-index
1->
<div class="button btn-align"
data-container="body"
data-toggle="popover"
data-placement="top"
title="Top"
data-trigger="hover"
data-title-backcolor="#fff"
data-content="A top aligned popover is a really boring thing in the real
life.">Top</div>
2->
.ggpopover.in {
z-index: 9999 !important;
}当父元素上的某些样式会干扰弹出框时，您将需要指定一个自定义容器，以使弹出框的HTML出现在该元素内。
例如，假设弹出窗口的父项是body，则可以使用。
<a href="#" data-toggle="tooltip" data-container="body"> Popover One </a>另一种情况是将popover放置在其他元素中，并且您想在该元素上显示popover，那么您需要在data-container中指定该元素。例如：假设我们在一个引导程序模态中有一个弹出框，其ID为'modal-two'，那么您需要将'data-container'设置为'modal-two'。
<a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>