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.
To działa dla mnie
$().popover({container: 'body'})
źródło
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.
źródło
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ślnieLub innym podejściem, nie tak dobrym, byłoby zwiększenie
z-index
popoveru. Możesz to zrobić za pomocą@zindexPopover
plikó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.
źródło
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.źródło
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.
źródło
<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'})
źródło
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.
źródło
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.
źródło
$('[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
źródło
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.
źródło
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; }
źródło
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; }
źródło
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>
źródło
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.
źródło