bootstrap popover не отображается поверх всех элементов

это работает для меня

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

У меня просто была ситуация, похожая на эту, с участием библиотеки DataTables JQuery с включенной прокруткой.

то, что оказалось, не имело ничего общего с Z-индексами, но с одним из окружающих дивов, имеющих свойство переполнения CSS, установленное как скрытое.

я исправил это, добавив событие в мой элемент, вызывающий popover, который также изменил свойство переполнения ответственного div на visible.

наиболее вероятной причиной является то, что отображение контента над popover имеет более высокий z-index. Без точного кода/стиля, я могу предложить два варианта :

вы должны попробовать определить точные элементы с помощью веб-инспектора (обычно F12 в вашем любимом браузере) и проверить их фактическое z-index.

если вы найдете это значение, вы можете установить его ниже, чем пирог что это z-index: 1010; по умолчанию

---

или другой подход, не так хорошо, было бы увеличить z-index в всплывающем окне. Вы можете сделать это либо с @zindexPopover в меньшем количестве файлов или непосредственно путем переопределения

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

---

если вы не можете найти решение, вы должны попробовать воспроизвести баг в что-то вроде этот jsfiddle - вы, вероятно, решить эту проблему при попытке получить ошибку.

У меня была аналогичная проблема с 2 фиксированными элементами - хотя наследство z-индекса было правильным, подсказка bootstrap была скрыта за одним элементом с более низким Z-индексом.

добавлять data-container="body" решен вопрос и теперь работает, как ожидалось.

Если data-container= "body" не работает, чем попробовать другие два свойства:

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

Z-индекс должен быть максимальный предел.

<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", то он не выравнивается должным образом в моем случае. Поэтому я указал класс родительского div popover, и он работал нормально.

html

Data-container=".testDiv"

js

$("#testPop").popover ({контейнер:'.testDiv'})

Это лучшее решение, если вы используете angular uib-bootsrap, чтобы использовать инъекцию зависимостей для $uibTooltipProvider, вы можете изменить способ всплывающие подсказки и всплывающие окна ведут себя по умолчанию для всех подсказок.

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

$uibTooltipProvider С помощью $uibTooltipProvider можно изменить способ поведения всплывающих подсказок и всплывающих окон по умолчанию; атрибуты выше всегда имеют приоритет. Следующие методы доступно:

setTriggers(obj) (пример: { 'openTrigger': 'closeTrigger'}) - расширяет сопоставления триггеров по умолчанию, упомянутые выше, с вашими собственными сопоставлениями.

опции(obj) - укажите набор значений по умолчанию для определенных атрибутов всплывающих подсказок и всплывающих окон. В настоящее время поддерживает, кто знаком с.

просто используя

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

может быть недостаточно при отображении popover над модальным BootstrapDialog, который также использует body в качестве контейнера и имеет более высокий Z-индекс.

Я пришел с этим исправлением, которое использует внутренности Bootstrap3 (может не работать с 2.x / 4.x) но большинство современных загрузочных установок-это 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-индекс, некоторые из них находятся под модальным 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>'
       });

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

Это может быть связано с главным списком z-индекса для переменных.меньше. В общем, убедитесь, что ваши переменные.меньше файлов является правильным и актуальным.