blocks|key|411638|text|这对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411639|$().popover({container:+'body'})|code-block|syntax|javascript|411640|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is Working for me</p>

<pre><code>$().popover({container: 'body'})
</code></pre>


blocks|key|411580|text|我刚刚遇到了一个类似的情况，涉及到启用了滚动的DataTables+JQuery库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411581|事实证明，这与Z索引无关，而是与其中一个封闭div的CSS+overflow属性设置为隐藏有关。|411582|我通过向元素添加一个触发popover的事件来修复它，这也将负责div的overflow属性更改为可见。|411583|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>I just had a situation that was similar to this, involving the DataTables JQuery library with scrolling enabled.</p>

<p>What turned out to be had nothing to do with Z-indices, but with one of the enclosing divs having the CSS overflow property set as hidden. </p>

<p>I fixed it by adding an event to my element triggering the popover which also changed the overflow property of the responsible div to visible.</p>


blocks|key|411614|text|对于2个固定元素，我也遇到了类似的问题--尽管z索引继承是正确的，但引导工具提示隐藏在z索引较低的一个元素后面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411615|添加data-container="body"解决了此问题，现在可以按预期工作。|offset|length|style|CODE|411616|entityMap^0|0|2|L|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>I had a similar issue with 2 fixed elements - even though the z-index heirachy was correct, the bootstrap tooltip was hidden behind the one element wth a lower z-index.</p>

<p>Adding <code>data-container="body"</code> resolved the issue and now works as expected.</p>


blocks|key|193538|text|如果data-container="body“不起作用，请尝试其他两个属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193539|data-container="body"+style="z-index:1000;+position:relative"|code-block|syntax|javascript|193540|Z索引应为最大限制。|193541|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If data-container="body" not works than try other two properties:</p>

<pre><code>data-container="body" style="z-index:1000; position:relative"
</code></pre>

<p>z-index should be max limit.</p>


blocks|key|411827|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|411828|上面的答案很有帮助，因为在data-container中设置值可以完成这项工作，但是如果我设置data-container="body“，那么在我的情况下它就不能正确对齐。所以我指定了popover的父div的类，它工作得很好。|unstyled|411829|html|411830|数据容器=“.testDiv”|411831|js|411832|$(“#testPop”)容器({.popover：'.testDiv'})|411833|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|F|7|W|8|@]|9|@]|A|$]]]|P|$]]

<pre><code>&lt;div class="testDiv"&gt;
&lt;a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv"&gt;
 &lt;i class="fa fa-info-circle"&gt;&lt;/i&gt;
&lt;/a&gt;

&lt;/div&gt;
</code></pre>

<p>Above answers were helpful as setting value in data-container did the job but if i set data-container="body" then it doesn't align properly in my case. So i specified the class of the parent div of popover and it worked fine.</p>

<p>html </p>

<p>data-container=".testDiv"</p>

<p>js</p>

<p>$("#testPop").popover({container: '.testDiv'})</p>


blocks|key|193805|text|许多年后，但像我一样，其他人可能会搜索这个。考虑到所有更新，所有这些都可以在JavaScript中通过正确的初始化选项来解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193806|$('.tip').tooltip({
++++boundary:+'viewport',
++++placement:+'top',
++++container:'body',
++++sanitize:+true,
++++appendToBody:+true
});|code-block|syntax|javascript|193807|这些设置解决了所有可能的问题。我的工具提示闪烁，页面上只有一半的项目正确显示，不断地从上到左跳跃，各种各样的怪异。但有了这些设置，一切都迎刃而解了。希望它能帮助任何正在寻找的人。|193808|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Many years later, but like me, others may search for this. All updates taking into consideration, all this can be solved with correct initialization options, in JavaScript.</p>

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

<p>Those settings solved all may issues. I had tooltips flickering, showing corectly only for half of the items on page, jumping from top to left continously, all kinds of wierdness. But with those settings everything is solved. Hope it help anyone looking.</p>


blocks|key|411932|text|++$('[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|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|411933|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|412067|text|给出我的2分钱，我的问题不是容器也不是像上面其他解决方案那样的z索引，而是在过渡中设置的不透明度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|412068|.popover{opacity:1}+|code-block|syntax|javascript|412069|解决了我的问题。|412070|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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.</p>
<pre><code>.popover{opacity:1} 
</code></pre>
<p>solved my issue.</p>


blocks|key|411700|text|只是在使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411701|$().popover({container:+'body'})|code-block|syntax|javascript|411702|当在BootstrapDialog模式上显示弹出窗口时可能是不够的，该模式也将body用作容器，并具有更高的z索引。|411703|我带来了这个修复，它使用了Bootstrap3的内部结构(可能不适用于2.x+/+4.x)，但大多数现代的Bootstrap安装都是3.x。|411704|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);
++++}
++++//+...
});|411705|这样，不同的弹出窗口可能会有不同的z索引，一些在BootstrapDialog模式下，而另一些在它上面。|411706|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Just using</p>

<pre><code>$().popover({container: 'body'})
</code></pre>

<p>could be not enough when displaying popover over a BootstrapDialog modal, which also uses body as container and has a higher z-index.</p>

<p>I come with this fix which uses internals of Bootstrap3 (may not work with 2.x / 4.x) but most of modern Bootstrap installations are 3.x.</p>

<pre><code>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);
    }
    // ...
});
</code></pre>

<p>Such way different popovers may have different z-index, some are under BootstrapDialog modal, while another ones are over it.</p>


blocks|key|411760|text|在我的例子中，我必须使用popover+template选项，并将我自己的css类添加到模板html中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411761|++++++++$("[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>'
+++++++});|code-block|syntax|javascript|411762|Css：|411763|.top-modal+{
++z-index:+99999;
}|411764|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In my case I had to use the popover template option and add my own css class to the template html:</p>

<pre><code>        $("[data-toggle='popover']").popover(
          {
            container: 'body',
            template: '&lt;div class="popover top-modal" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'
       });
</code></pre>

<p>Css:</p>

<pre><code>.top-modal {
  z-index: 99999;
}
</code></pre>


blocks|key|411870|text|使用data-container="body"和z-index解决的问题|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|411871|<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>|code-block|syntax|javascript|411872|.ggpopover.in+{
++++z-index:+9999+!important;
}|411873|entityMap^0|2|L|O|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|H|7|U|8|@]|D|@]|E|$I|J]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Problem solved with <code>data-container=&quot;body&quot;</code> and <code>z-index</code>:</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;button btn-align&quot;
     data-container=&quot;body&quot;  
     data-toggle=&quot;popover&quot;
     data-placement=&quot;top&quot;
     title=&quot;Top&quot;
     data-trigger=&quot;hover&quot;
     data-title-backcolor=&quot;#fff&quot;
     data-content=&quot;A top aligned popover is a really boring thing in the real life.&quot;
&gt;Top&lt;/div&gt;
</code></pre>
<pre class="lang-css prettyprint-override"><code>.ggpopover.in {
    z-index: 9999 !important;
}
</code></pre>


blocks|key|412026|text|当你在一个父元素上有一些干扰弹出窗口的样式时，你需要指定一个定制的容器，这样弹出窗口的HTML就会出现在该元素中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|412027|例如，假设popover的父对象是body，那么您可以使用。|412028|++++<a+href="#"+data-toggle="tooltip"+data-container="body">+Popover+One+</a>|code-block|syntax|javascript|412029|其他情况可能是当popover被放置在其他元素中，而您想要在该元素上显示popover时，则需要在data-container中指定该元素。例如:假设我们有一个bootstrap+modal中的popover，id为‘modal+two’，那么你需要将'data-container‘设置为’modal+two‘。|412030|++++<a+href="#"+data-toggle="tooltip"+data-container="#modal-two">+Popover+Two+</a>|412031|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom container so that the popover’s HTML appears within that element instead.</p>

<p>For instance say the parent for a popover is body then you can use.</p>

<pre><code>    &lt;a href="#" data-toggle="tooltip" data-container="body"&gt; Popover One &lt;/a&gt;
</code></pre>

<p>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'.</p>

<pre><code>    &lt;a href="#" data-toggle="tooltip" data-container="#modal-two"&gt; Popover Two &lt;/a&gt;
</code></pre>


blocks|key|193415|text|这可能与variables.less上的z索引主列表有关。通常，请确保您的variables.less文件正确且是最新的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193416|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>It could have to do with the z-index master list on variables.less. In general, be sure that your variables.less file is correct and up-to-date.</p>


<p>I'm working on a bootstrap site and after updating to bootstrap 2.2 from 2.0 everything worked except the popover.</p>

<p>The popovers still show up fine, but they don't show up on top of all other elements. </p>

<pre><code>&lt;div&gt; // this sits on top of the popover. this did not happen before cleaning up scripts.
     &lt;div&gt;  //popover shows on top of this
          &lt;div&gt; //popover shows on top of this
               //link here with popover in it.
          &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Anyone have any idea on why the behavior of the popover changed, or how I can fix it? Thanks.</p>


bootstrap popover not showing on top of all elements

容器

我在一个bootstrap站点上工作，在从2.0更新到bootstrap 2.2后，除了弹出窗口之外，一切都正常工作。弹出框仍然可以很好地显示，但它们不会显示在所有其他元素的顶部。<div> // this sits on top of the popover. this did not happen before cleaning up scripts.     <div>  //popover

问引导弹出窗口未显示在所有元素的顶部
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导弹出窗口未显示在所有元素的顶部EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导弹出窗口未显示在所有元素的顶部
EN