popover завантажувача не відображається поверх усіх елементів

Я працюю на сайті завантаження і після оновлення до bootstrap 2.2 з 2.0 все працювало, крім popover.

Міцні жителі все ще проявляються прекрасно, але вони не відображаються поверх усіх інших елементів.

<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/isissue/5889

Це працює для мене

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

У мене просто була ситуація, яка була подібною до цієї, залучаючи бібліотеку DataTables JQuery з увімкненою прокруткою.

Те, що виявилося, не має нічого спільного з Z-індексами, але з одним із додаючих дівок, що властивість переповнення CSS встановлено як приховане.

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

У мене була аналогічна проблема з двома фіксованими елементами - навіть незважаючи на те, що ірахія 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 = "body", то в моєму випадку воно не вирівняється належним чином. Тож я вказав клас батьківського діва Popover, і він працював чудово.

html

data-container = ". testDiv"

js

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

Найкраще рішення, якщо ви використовуєте кутовий uib-bootsrap, - Використовувати ін'єкцію залежності для $ uibTooltipProvider, ви можете змінити спосіб підказки та попового режиму за замовчуванням для всіх підказок.

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

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

setTriggers (obj) (Приклад: {'openTrigger': 'closeTrigger'}) - розширює вказані вище відображення за замовчуванням на власні відображення.

options (obj) - надайте набір параметрів за замовчуванням для певних підказок та атрибутів popover. В даний час підтримує ті, що мають значок 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-індекс, деякі знаходяться під модальним 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-код поповера.

Наприклад, скажімо, що батько для Popover - це тіло, яке ви можете використовувати.

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

Інший випадок може бути, коли Popover розміщується всередині якогось іншого елемента і ви хочете показати popover над цим елементом, тоді вам потрібно буде вказати цей елемент у контейнері даних. Наприклад: Припустимо, у нас є перехід всередину модаля завантаження з id як "modal-two", тоді вам потрібно встановити "контейнер даних" на "modal-two".

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

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