没有在所有元素顶部显示引导弹出窗口

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

有人知道为什么酥饼的性能变了或者我该怎么修吗，谢谢。

145334 次浏览
小开

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

小开

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

你应该尝试精确定位网页检查器(通常是你喜欢的浏览器上的 F12)和检查他们的实际 z-index元素。

如果你找到这个值，你可以设置它为 比酥饼还要低，也就是 默认为 z-index: 1010;

或者另一种方法，不那么好，就是增加酥饼的 z-index。您可以通过使用 Less 文件中的 @zindexPopover或者直接通过重写来实现

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

如果你不能找到一个解决方案，你应该尝试在类似 这把小提琴的东西中重现这个错误-你可能会在尝试获得这个错误的同时解决这个问题。

小开

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

结果是什么与 Z 索引没有任何关系，但与一个封闭的 div 有 CSS 溢出属性设置为隐藏。

我通过在元素中添加一个触发 popover 的事件修复了这个问题，该事件还将负责的 div 的溢出属性改为可见。

小开
最佳答案

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

小开

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

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

小开

这是为我工作

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

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

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

Z 指数应该是最大限度。

小开

这个最好的解决方案如果你正在使用棱角的 uib-bootsrap 就是使用 $uibTooltipProvider 的依赖注入，你可以改变所有工具提示的默认工具提示和弹出窗口的工作方式。

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

$uibTooltipProvider 通过 $uibTooltipProvider，您可以更改默认情况下工具提示和 popover 的行为方式; 以上属性始终具有优先权。下列方法可供选择:

SetTriggers (obj)(例如: {‘ openTrigger’: ‘ closeTrigger’})-使用您自己的映射扩展上面提到的默认触发器映射。

Options (obj)-为某些工具提示和 popover 属性提供一组默认值。目前支持 C 标志的那些。

小开

只是在吸毒

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

在 BootstrapDialog 模式上显示弹出窗口可能不够，该模式还使用 body 作为容器，并具有较高的 z 索引。

我带来了这个修复程序，它使用 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);
}
// ...
});

这样不同的 popover 可能有不同的 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>'
});

传真:

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

上面的答案很有帮助，因为设置数据容器中的值起到了作用，但是如果我设置数据容器 = “ body”，那么在我的情况下它就没有正确对齐。所以我指定了 popover 的父 div 类，它工作得很好。

Html

Data-Container = “ . testDiv”

JS

$(“ # testPop”) . popover ({ Container: ‘ . testDiv’})

小开

用 data-container="body"和 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;
}
小开

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

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

这些设置解决了所有可能的问题。我的工具提示闪烁不定，只能正确显示页面上的一半项目，从上到左不断跳转，各种奇怪的东西。但有了这些设置，一切都解决了。希望能帮到别人。

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

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

例如，假设 popover 的父元素是 body，那么您可以使用。

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

另一种情况可能是，当 popover 被放置在其他元素中时，您希望在该元素上显示 popover，那么您需要在 data-Container 中指定该元素。 例如: 假设我们在一个 bootstrap 模式中使用 popover，id 为“ mode-two”，那么您需要将“ data-Container”设置为“ mode-two”。

    <a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>
小开

给我两分钱, 我的问题不是容器或 z-index 像上面的其他解决方案一样，而是在转换中设置的不透明度。

.popover{opacity:1}

解决了我的问题。


提交答案