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

129

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.

Kyle
źródło

Odpowiedzi:

367

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

Kyle
źródło
18
To naprawdę pomogło. Wprowadziłem następującą zmianę w inicjalizacji popover i zadziałało: $ ('# element'). Popover ({container: 'body', // inne parametry});
Pawan Pillai,
Mam 404 dla tego łącza. Zaktualizuj, proszę?
NoBrainer
3
@NoBrainer Wydaje się, że nie można znaleźć do niego nowego linku, ale dodanie data-container = "body" do elementu html powinno działać lub przekazanie kontenera: „body” przez JavaScript powinno również działać
Kyle
dodanie data-container = "body" wydaje się działać również w bootstrapie 3 w przypadku podpowiedzi, gdy są na przykład przepełnione
bulanmaster
1
Chociaż rozwiązuje to pierwotny problem z indeksem Z, popover nie trzyma się oryginalnego elementu wyzwalającego po rozpoczęciu przeciągania rzeczy po ekranie, powiększania lub pomniejszania lub zmiany rozmiaru okna. Sam szukam lepszej odpowiedzi na to pytanie.
MSC
45

To działa dla mnie

$().popover({container: 'body'})
Saqib R.
źródło
1
Wielkie dzięki, uratowałeś mnie: D
Vuong Tran
To zadziałało również dla mnie. ważne jest, aby wiedzieć, jaką wartość należy ustawić dla właściwości „kontenera”. Dla porównania, zawartość skopiowana z dokumentu bootstrap popover - „Jeśli masz jakieś style w elemencie nadrzędnym, które kolidują z popover, będziesz chciał określić niestandardowy kontener, tak aby zamiast tego kod HTML popover pojawił się w tym elemencie”.
Nirman
25

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.

Dologan
źródło
7
Właśnie uratowałeś 2 godziny mojego życia. Niezmiernie wdzięczny!
Olga Gnatenko
1
Jesteś ratownikiem życia !! Wszystkie odpowiedzi, które przeczytałem, dotyczyły indeksu z i szczerze mówiąc, była to jedyna rzecz, która miała dla mnie sens, ale ostatecznie żadna z sugestii nie zadziałała, dopóki nie zdecydowałem się wypróbować odpowiedzi niezwiązanej z indeksem z! Dzięki
Sebastian
To też był mój problem, wielkie dzięki za zaoszczędzenie mi wielu godzin pracy, ponieważ myślałem, że mój kod jest uszkodzony.
GETah
17

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.

Sherbrow
źródło
Spróbuję utworzyć jsfiddle i odesłać, jeśli go nie znajdę, ale bez powodzenia próbowałem nadać popoverowi indeks z 9999.
Kyle,
1
dzięki za wskazanie domyślnej wartości indeksu z popover.
Will Tartak,
12

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.

Charl Kruger
źródło
8

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.

Nalan Madheswaran
źródło
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>

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'})

Novice_JS
źródło
2

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.

Enkode
źródło
2

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.

Lucian Minea
źródło
i tak, stało się ... Właśnie skopiowałem i wkleiłem i rozwiązałem problemy, które miałem z umieszczaniem popovera na wierzchu ... pojemnik: korpus nie działał, zmiana stylu czegokolwiek blisko związanego nie działała .. ja nie wiem, jaka jest magia i nie miałem czasu się dowiedzieć, ale po prostu zadziałało :) dzięki :)
Diego De Vita
1
  $('[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
Ajay
źródło
0

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.

Dmitriy Sintsov
źródło
0

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;
}
mortenma71
źródło
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
źródło
0

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>
SumitK
źródło
-1

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.

Scott Simpson
źródło