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

128

Я работаю над сайтом начальной загрузки, и после обновления до версии 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>

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

рукав моря
источник

Ответы:

365

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

рукав моря
источник
18
Это действительно помогло. Я сделал следующее изменение в инициализации всплывающего окна, и оно сработало: $ ('# element'). Popover ({container: 'body', // другие параметры});
Pawan Pillai
Я получил 404 по этой ссылке. Обновите, пожалуйста?
NoBrainer 07
3
@NoBrainer Не могу найти для него новую ссылку, но добавление data-container = "body" к элементу html должно работать, или передача в container: 'body' через javascript также должна работать
Кайл
добавление data-container = "body", похоже, работает и в bootstrap 3, и для всплывающих подсказок, когда они, например, находятся в переполнении
bulanmaster
1
Хотя это устраняет исходную проблему с z-индексом, всплывающее окно не придерживается исходного элемента триггера, когда вы начинаете перетаскивать объекты по экрану, увеличивать или уменьшать масштаб или изменять размер окна. Я ищу на это лучший ответ.
MSC
44

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

$().popover({container: 'body'})
Сакиб Р.
источник
1
Большое спасибо, вы спасли меня: D
Вуонг Тран
Это сработало и для меня. важно знать, какое значение необходимо установить для свойства «контейнер». Просто для справки, содержимое, скопированное из документа всплывающих окон начальной загрузки: «Если у вас есть стили родительского элемента, которые мешают отображению всплывающего окна, вы захотите указать собственный контейнер, чтобы HTML всплывающего окна отображался вместо этого внутри этого элемента».
Нирман
24

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

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

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

Dologan
источник
7
Вы только что спасли 2+ часа моей жизни. Очень благодарен!
Ольга Гнатенко
1
Ты спасатель !! Все ответы, которые я читал, касались z-index, и, честно говоря, это было единственное, что имело для меня смысл, но в конце концов ни одно из предложений не сработало, пока я не решил попробовать ваш несвязанный с z-index ответ! Спасибо
Себастьян
Это тоже была моя проблема, большое спасибо за сэкономленные часы переделки, так как я думал, что мой код сломан.
GETah
17

Наиболее вероятная причина в том, что контент, отображаемый во всплывающем окне, имеет более высокое значение 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 - вы, вероятно, решите проблему, пытаясь получить ошибку.

Sherbrow
источник
Я попытаюсь создать jsfiddle и отправить его обратно, если не найду его, но я попытался сделать popover z-index равным 9999, но безуспешно.
Кайл
1
спасибо за указание значения z-index по умолчанию для всплывающего окна.
Уилл Тартак
12

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

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

Чарл Крюгер
источник
8

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

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

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

Налан Мадхесваран
источник
5
<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'})

Novice_JS
источник
2

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

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

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

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

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

Enkode
источник
2

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

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

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

Люсьен Минеа
источник
0

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

$().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, а другие - поверх него.

Дмитрий Синцов
источник
0

В моем случае мне пришлось использовать опцию шаблона 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;
}
mortenma71
источник
0
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;
}
ecalimac
источник
0
  $('[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
Аджай
источник
0

Если у вас есть стили родительского элемента, которые мешают отображению всплывающего окна, вам нужно указать собственный контейнер, чтобы 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>
SumitK
источник
-1

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

Скотт Симпсон
источник