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

Ответ 1

Мне удалось решить проблему, установив 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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

z-index должен быть максимальным.

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

html

данных контейнера = "testDiv"

JS

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

Ответ 8

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

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

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

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

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

Ответ 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;
}

Ответ 10

Много лет спустя, но, как и я, другие могут искать это. Все обновления с учетом, все это можно решить с помощью правильных опций инициализации, в JavaScript.

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

Эти настройки решают все возможные проблемы. У меня вспыхивали всплывающие подсказки, в основном показывавшие только половину элементов на странице, непрерывно перепрыгивающие сверху вниз, всевозможные странности. Но с этими настройками все решаемо. Надеюсь, это поможет всем, кто ищет.

Ответ 11

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

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

может быть недостаточно при отображении popover над модальным модулем BootstrapDialog, который также использует тело в качестве контейнера и имеет более высокий индекс 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);
    }
    // ...
});

Таким образом, у разных popovers могут быть разные z-index, некоторые из них находятся в модуле BootstrapDialog, а другие - над ним.

Ответ 12

В моем случае мне пришлось использовать опцию popover template и добавить свой собственный класс 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;
}

Ответ 13

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

Ответ 14

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