всплывающее окно начальной загрузки не отображается поверх всех элементов

Я работаю над сайтом начальной загрузки, и после обновления до версии 2.2 с версии 2.0 все заработало, кроме всплывающего окна.

Всплывающие окна по-прежнему отображаются нормально, но они не отображаются поверх всех других элементов.

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

Кто-нибудь знает, почему изменилось поведение всплывающего окна или как я могу это исправить? Спасибо.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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, и он работал нормально.

HTML

Данные-контейнер = "testDiv"

JS

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

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

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

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

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

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

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

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

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

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

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

может быть недостаточно при отображении всплывающего окна поверх модального окна 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);
    }
    // ...
});

Таким образом, разные всплывающие окна могут иметь разный 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>'
       });

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

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

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

Например, скажем, что родительским элементом для всплывающего окна является тело, которое вы можете использовать.

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

Другой случай может быть, когда всплывающее окно помещается внутри какого-либо другого элемента, и вы хотите отображать всплывающее окно над этим элементом, тогда вам нужно указать этот элемент в контейнере данных. Пример: Предположим, у нас есть всплывающее окно внутри модального окна начальной загрузки с id как 'modal-two', тогда вам нужно установить 'data-container' в 'modal-two'.

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

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