130

我在一个引导站点上工作，在从 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>

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

4

16 回答 16

373

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

于 2013-04-12T22:37:26.900 回答
46

这对我有用

$().popover({container: 'body'})
于 2015-03-11T08:19:08.013 回答
26

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

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

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

于 2013-04-12T17:01:02.247 回答
17

最可能的原因是弹出框上显示的内容具有较高的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中重现错误- 您可能会在尝试获取错误时解决问题。

于 2012-12-25T03:17:33.373 回答
12

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

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

于 2014-08-25T08:53:48.037 回答
9

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

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

z-index 应该是最大限制。

于 2015-12-19T03:35:14.387 回答
5 
<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

数据容器=".testDiv"

js

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

于 2017-08-04T16:07:09.307 回答
2

如果您使用 angular uib-bootsrap，最好的解决方案是对 $uibTooltipProvider 使用依赖注入，您可以更改所有工具提示的工具提示和弹出框的默认行为方式。

$uibTooltipProvider.options({
  appendToBody: true
});

$uibTooltipProvider 通过 $uibTooltipProvider，您可以更改工具提示和弹出框默认的行为方式；上述属性始终优先。可以使用以下方法：

setTriggers (obj)（示例：{ 'openTrigger': 'closeTrigger' }） - 使用您自己的映射扩展上述默认触发器映射。

options (obj) - 为某些工具提示和弹出框属性提供一组默认值。目前支持带有 C 标志的那些。

于 2016-03-27T19:15:41.743 回答
2

许多年后，但像我一样，其他人可能会搜索这个。考虑到所有更新，所有这些都可以通过 JavaScript 中的正确初始化选项来解决。

$('.tip').tooltip({
    boundary: 'viewport',
    placement: 'top',
    container:'body',
    sanitize: true,
    appendToBody: true
});

这些设置解决了所有可能的问题。我的工具提示闪烁，仅显示页面上一半的项目，从上到左不断跳跃，各种奇怪。但是有了这些设置，一切都解决了。希望它对任何寻找的人有所帮助。

于 2019-05-23T17:38:59.183 回答
1 
  $('[data-toggle="popover"]').popover({
        placement: 'top',
        boundary: 'viewport',
        trigger: 'hover',
        html: true,
        content: function () {
            let content = $(this).attr("data-popover-content");
            return $(content).html();
        }
    });,



`placement`: 'top',
`boundary`: 'viewport'
both needed
于 2019-07-15T10:05:22.697 回答
1

giving my 2 cents, My issue was NOT the container nor the z-index like other solution above, but the opacity set in a transition.

.popover{opacity:1}

solved my issue.

于 2021-04-01T16:57:27.197 回答
0

只是使用

$().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);
    }
    // ...
});

这样不同的popovers可能有不同的z-index，一些在BootstrapDialog模式下，而另一些在它上面。

于 2016-12-22T08:31:24.620 回答
0

在我的情况下，我必须使用 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;
}
于 2017-01-10T13:15:04.517 回答
0

data-container="body"用and解决了问题z-index：

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

.ggpopover.in {
    z-index: 9999 !important;
}
于 2018-09-03T13:45:16.310 回答
0

当父元素上的某些样式会干扰弹出框时，您需要指定一个自定义容器，以便弹出框的 HTML 出现在该元素中。

例如说弹出框的父级是 body 然后你可以使用。

    <a href="#" data-toggle="tooltip" data-container="body"> Popover One </a>

Other case might be when popover is placed inside some other element and you want to show popover over that element, then you'll need to specify that element in data-container. ex: Suppose, we have popover inside a bootstrap modal with id as 'modal-two', then you'll need to set 'data-container' to 'modal-two'.

    <a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>
于 2019-11-22T10:12:18.063 回答
-1

它可能与 variables.less 上的 z-index 主列表有关。通常，请确保您的 variables.less 文件是正确且最新的。

于 2012-12-24T20:31:30.840 回答