Question

我正在开发一个bootstrap网站，在从2.0更新到bootstrap 2.2之后，除了popover之外一切正常。

弹出窗口仍然很好，但它们并没有显示在所有其他元素之上。

<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的行为发生了变化，或者我如何解决它？感谢。

Answer 1

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

Answer 2

这对我有用

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

Answer 3

我的情况与此类似，涉及DataTables JQuery库并启用了滚动功能。

结果与Z-indices无关，但是其中一个封闭的div将CSS overflow属性设置为hidden。

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

Answer 4

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

您应该尝试使用网络检查程序（通常是您最喜爱的浏览器上的F12）查明确切的元素并检查其实际的z-index。

如果您找到此值，则可以将其设置为低于弹出窗口，即z-index: 1010; by default

或者另一种不那么好的方法是增加弹出窗口的z-index。您可以使用Less文件中的@zindexPopover或直接覆盖

来执行此操作

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

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

Answer 5

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

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

Answer 6

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

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

z-index应该是最大限制。

Answer 7

<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 =“body”，那么在我的情况下它没有正确对齐。所以我指定了popover的父div的类，它运行正常。

html

数据容器= “testDiv”

JS

$（“＃testPop”）。popover（{container：'。testDiv'}）

Answer 8

如果您使用angular uib-bootsrap，这个最佳解决方案是使用$ uibTooltipProvider的依赖注入，您可以更改默认情况下所有工具提示的工具提示和弹出窗口的行为方式。

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

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

setTriggers （obj）（例如：{'openTrigger'：'closeTrigger'}） - 使用您自己的映射扩展上面提到的默认触发器映射。

选项（obj） - 为某些工具提示和弹出属性提供一组默认值。目前支持带有C徽章的那些。

Answer 9

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

Answer 10

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

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

这些设置解决了所有可能出现的问题。我的工具提示闪烁，只显示页面上一半的内容，从上到下连续不断地跳动，产生各种奇怪的感觉。但是有了这些设置，一切都解决了。希望它能帮助任何人。

Answer 11

给我 2 美分，我的问题不是容器，也不是上述其他解决方案的 z-index，而是过渡中设置的不透明度。

.popover{opacity:1}

解决了我的问题。

Answer 12

只需使用

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

在BootstrapDialog模式上显示popover时，

可能还不够，它还使用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模式下，而另一些是在它上面。

Answer 13

在我的情况下，我必须使用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;
}

Answer 14

  $('[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

Answer 15

当父元素上的某些样式会干扰弹出框时，您需要指定一个自定义容器，以便弹出框的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>

Answer 16

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

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

16 个答案: