wyskakujące okienko bootstrap nie wyświetla się na wszystkich elementach

Pracuję na stronie bootstrap i po aktualizacji do bootstrap 2.2 z wersji 2.0 wszystko działało z wyjątkiem popover.

Popover nadal pokazuje się dobrze, ale nie pojawiają się nad wszystkimi innymi elementami.

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

Czy ktoś ma pojęcie, dlaczego zmieniło się zachowanie popovera lub jak mogę to naprawić? Dzięki.

Udało mi się rozwiązać problem, ustawiając data-container="body"element html

HTML przykład:

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript przykład:

$('your element').tooltip({ container: 'body' }) 

Znalezione pod tym linkiem: https://github.com/twitter/bootstrap/issues/5889

To działa dla mnie

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

Właśnie miałem sytuację podobną do tej, obejmującą bibliotekę DataTables JQuery z włączonym przewijaniem.

Okazało się, że nie ma to nic wspólnego z indeksami Z, ale z jednym z otaczających elementów div, w którym właściwość przepełnienia CSS jest ustawiona jako ukryta.

Naprawiłem to, dodając zdarzenie do mojego elementu wyzwalające popover, co również zmieniło właściwość przepełnienia odpowiedzialnego elementu div na visible.

Najbardziej prawdopodobną przyczyną jest to, że zawartość wyświetlana nad popover ma wyższy z-index. Bez dokładnego kodu / stylu mogę zaoferować dwie opcje:

Powinieneś spróbować wskazać dokładne elementy za pomocą inspektora sieci (zwykle F12 w Twojej ulubionej przeglądarce) i sprawdzić ich rzeczywiste z-index.

Jeśli znajdziesz tę wartość można ustawić go niżej niż popover który jest z-index: 1010;domyślnie

Lub innym podejściem, nie tak dobrym, byłoby zwiększenie z-indexpopoveru. Możesz to zrobić za pomocą @zindexPopoverplików w Less lub bezpośrednio, nadpisując

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

Jeśli nie możesz znaleźć rozwiązania, spróbuj odtworzyć błąd w czymś takim jak ten jsfiddle - prawdopodobnie rozwiążesz problem podczas próby znalezienia błędu.

Miałem podobny problem z 2 stałymi elementami - mimo że heirachy z indeksem z były poprawne, podpowiedź bootstrapu była ukryta za jednym elementem z niższym indeksem z.

Dodanie data-container="body"rozwiązało problem i teraz działa zgodnie z oczekiwaniami.

Jeśli data-container = "body" nie działa, wypróbuj inne dwie właściwości:

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

Indeks z powinien być maksymalnym limitem.

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

Powyższe odpowiedzi były pomocne, ponieważ ustawienie wartości w kontenerze danych wykonało zadanie, ale jeśli ustawię data-container = "body", w moim przypadku nie zostanie to odpowiednio wyrównane. Więc określiłem klasę nadrzędnego elementu DIV w popover i zadziałało dobrze.

html

data-container = ". testDiv"

js

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

Najlepszym rozwiązaniem, jeśli używasz kątowego uib-bootsrap, jest użycie iniekcji zależności dla $ uibTooltipProvider, możesz zmienić sposób, w jaki domyślnie zachowują się podpowiedzi i okna podręczne dla wszystkich podpowiedzi.

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

$ uibTooltipProvider Za pomocą $ uibTooltipProvider można zmienić domyślny sposób działania podpowiedzi i okienek podręcznych; powyższe atrybuty zawsze mają pierwszeństwo. Dostępne są następujące metody:

setTriggers (obj) (Przykład: {'openTrigger': 'closeTrigger'}) - Rozszerza domyślne mapowania wyzwalaczy wspomniane powyżej o własne mapowania.

options (obj) - Zapewnia zestaw wartości domyślnych dla niektórych atrybutów podpowiedzi i popover. Obecnie obsługuje te z odznaką C.

Wiele lat później, ale podobnie jak ja, inni mogą tego szukać. Biorąc pod uwagę wszystkie aktualizacje, wszystko to można rozwiązać za pomocą odpowiednich opcji inicjalizacji w JavaScript.

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

Te ustawienia rozwiązały wszystkie możliwe problemy. Miałem migotanie podpowiedzi, które wyświetlały się poprawnie tylko dla połowy elementów na stronie, przeskakując w sposób ciągły od góry do lewej, wszelkiego rodzaju dziwności. Ale z tymi ustawieniami wszystko jest rozwiązane. Mam nadzieję, że pomoże to każdemu, kto szuka.

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

Po prostu używam

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

może nie wystarczyć przy wyświetlaniu okna popover w module BootstrapDialog, który również używa body jako kontenera i ma wyższy indeks Z.

Pochodzę z tą poprawką, która wykorzystuje wewnętrzne elementy Bootstrap3 (może nie działać z 2.x / 4.x), ale większość nowoczesnych instalacji Bootstrap to 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);
    }
    // ...
});

W ten sposób różne popovery mogą mieć inny indeks Z, niektóre są w trybie BootstrapDialog, a inne są nad nim.

W moim przypadku musiałem skorzystać z opcji szablonu popover i dodać własną klasę css do szablonu 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;
}

Jeśli masz jakieś style w elemencie nadrzędnym, które kolidują z wyskakującym okienkiem, będziesz chciał określić niestandardowy kontener, aby zamiast tego w tym elemencie pojawił się kod HTML popover.

Na przykład powiedz, że rodzicem popover jest body, a następnie możesz użyć.

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

Innym przypadkiem może być, gdy popover zostanie umieszczony w innym elemencie i chcesz wyświetlić popover nad tym elementem, wtedy musisz określić ten element w kontenerze danych. przykład: Załóżmy, że mamy popover wewnątrz modalu bootstrap z id jako „modal-dwa”, wtedy musisz ustawić „data-container” na „modal-dwa”.

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

Może to mieć związek z główną listą indeksu Z na zmiennych. Bez. Ogólnie rzecz biorąc, upewnij się, że Twój plik variable.less jest poprawny i aktualny.