Das Bootstrap-Popover wird nicht über allen Elementen angezeigt

128

Ich arbeite an einer Bootstrap-Site und nach dem Update auf Bootstrap 2.2 von 2.0 hat alles funktioniert, außer dem Popover.

Die Popover werden immer noch gut angezeigt, aber sie werden nicht über allen anderen Elementen angezeigt.

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

Hat jemand eine Idee, warum sich das Verhalten des Popovers geändert hat oder wie ich es beheben kann? Vielen Dank.

Kyle
quelle

Antworten:

365

Ich konnte das Problem lösen, indem ich data-container="body"das HTML-Element einstellte

HTML Beispiel:

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

JavaScript Beispiel:

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

Entdeckt über diesen Link: https://github.com/twitter/bootstrap/issues/5889

Kyle
quelle
18
Das hat wirklich geholfen. Ich habe die folgende Änderung an der Popover-Initialisierung vorgenommen und es hat funktioniert: $ ('# element'). Popover ({container: 'body', // andere Parameter});
Pawan Pillai
Ich habe eine 404 für diesen Link. Update bitte?
NoBrainer
3
@NoBrainer Es scheint nicht möglich zu sein, einen neuen Link dafür zu finden, aber das Hinzufügen von data-container = "body" zum HTML-Element sollte funktionieren, oder das Übergeben von container: 'body' durch Javascript sollte ebenfalls funktionieren
Kyle
Das Hinzufügen von data-container = "body" scheint auch in Bootstrap 3 für Tooltips zu funktionieren, wenn sie sich beispielsweise im Überlauf befinden
bulanmaster
1
Während dies das ursprüngliche Z-Index-Problem behebt, bleibt das Popover nicht beim ursprünglichen Triggerelement, sobald Sie anfangen, Dinge über den Bildschirm zu ziehen, hinein- oder herauszuzoomen oder die Fenstergröße zu ändern. Ich suche selbst eine bessere Antwort darauf.
MSC
44

Das funktioniert für mich

$().popover({container: 'body'})
Saqib R.
quelle
1
Vielen Dank, Sie haben mich gerettet: D
Vuong Tran
Das hat auch bei mir funktioniert. Es ist wichtig zu wissen, welcher Wert für die Eigenschaft "container" festgelegt werden muss. Nur als Referenz: Inhalt aus dem Bootstrap-Popover-Dokument kopiert - "Wenn Sie einige Stile für ein übergeordnetes Element haben, die ein Popover stören, möchten Sie einen benutzerdefinierten Container angeben, damit der HTML-Code des Popovers stattdessen in diesem Element angezeigt wird."
Nirman
24

Ich hatte gerade eine ähnliche Situation, in der die DataTables JQuery-Bibliothek mit aktiviertem Bildlauf involviert war.

Was sich herausstellte, hatte nichts mit Z-Indizes zu tun, sondern mit einem der einschließenden Divs, bei dem die CSS-Überlaufeigenschaft als ausgeblendet festgelegt war.

Ich habe es behoben, indem ich meinem Element ein Ereignis hinzugefügt habe, das das Popover auslöste, wodurch auch die Überlaufeigenschaft des verantwortlichen Div in sichtbar geändert wurde.

Dologan
quelle
7
Du hast gerade 2+ Stunden meines Lebens gerettet. Sehr dankbar!
Olga Gnatenko
1
Du bist ein Lebensretter!! Alle Antworten, die ich las, betrafen den Z-Index und um ehrlich zu sein, war es das einzige, was für mich Sinn machte, aber am Ende funktionierte keiner der Vorschläge, bis ich mich entschied, Ihre Z-Index-Antwort ohne Bezug zu versuchen! Vielen Dank
Sebastian
Dies war auch mein Problem. Vielen Dank, dass Sie mir stundenlange Nacharbeit erspart haben, da ich dachte, mein Code sei kaputt.
GETah
17

Die wahrscheinlichste Ursache ist, dass der über dem Popover angezeigte Inhalt einen höheren Wert hat z-index. Ohne den genauen Code / Stil kann ich zwei Optionen anbieten:

Sie sollten versuchen, die genauen Elemente mit einem Webinspektor zu ermitteln (normalerweise F12 in Ihrem bevorzugten Browser) und deren tatsächliche Elemente zu überprüfen z-index.

Wenn Sie diesen Wert finden, können Sie es niedriger ist als die popover das ist z-index: 1010;standardmäßig


Oder der andere Ansatz, der nicht so gut ist, wäre, z-indexden Popover zu erhöhen . Sie können dies entweder mit @zindexPopoverden Less-Dateien oder direkt durch Überschreiben tun

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

Wenn Sie keine Lösung finden, sollten Sie versuchen, den Fehler in so etwas wie dieser jsfiddle zu reproduzieren. Sie werden das Problem wahrscheinlich beheben, während Sie versuchen, den Fehler zu beheben.

Sherbrow
quelle
Ich werde versuchen, eine jsfiddle zu erstellen und zurück zu posten, wenn ich sie nicht finde, aber ich habe versucht, das Popover ohne Glück zu einem Z-Index von 9999 zu machen.
Kyle
1
Vielen Dank, dass Sie auf den Standard-Z-Index-Wert des Popovers hingewiesen haben.
Will Tartak
12

Ich hatte ein ähnliches Problem mit 2 festen Elementen - obwohl die Z-Index-Erbe korrekt war, wurde der Bootstrap-Tooltip hinter dem einen Element mit einem niedrigeren Z-Index versteckt.

Das Hinzufügen hat data-container="body"das Problem behoben und funktioniert nun wie erwartet.

Charl Kruger
quelle
8

Wenn data-container = "body" nicht funktioniert, versuchen Sie es mit zwei anderen Eigenschaften:

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

Der Z-Index sollte die maximale Grenze sein.

Nalan Madheswaran
quelle
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>

Die obigen Antworten waren hilfreich, da das Setzen des Werts im Datencontainer den Job erledigt hat, aber wenn ich data-container = "body" setze, wird es in meinem Fall nicht richtig ausgerichtet. Also habe ich die Klasse des übergeordneten Div von Popover angegeben und es hat gut funktioniert.

html

data-container = ". testDiv"

js

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

Novice_JS
quelle
2

Die beste Lösung, wenn Sie eckigen uib-bootsrap verwenden, ist die Verwendung der Abhängigkeitsinjektion für $ uibTooltipProvider. Sie können das Verhalten von Tooltips und Popovers standardmäßig für alle Tooltips ändern.

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

$ uibTooltipProvider Über den $ uibTooltipProvider können Sie das Verhalten von QuickInfos und Popovers standardmäßig ändern. Die obigen Attribute haben immer Vorrang. Folgende Methoden stehen zur Verfügung:

setTriggers (obj) (Beispiel: {'openTrigger': 'closeTrigger'}) - Erweitert die oben genannten Standard-Trigger-Zuordnungen um eigene Zuordnungen.

options (obj) - Geben Sie eine Reihe von Standardeinstellungen für bestimmte Tooltip- und Popover-Attribute an. Unterstützt derzeit diejenigen mit dem C-Abzeichen.

Enkode
quelle
2

Viele Jahre später, aber wie ich, können andere danach suchen. Alle Updates unter Berücksichtigung, all dies kann mit korrekten Initialisierungsoptionen in JavaScript gelöst werden.

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

Diese Einstellungen lösten alle möglichen Probleme. Ich hatte Tooltips, die flackerten und nur für die Hälfte der Elemente auf der Seite korrekt angezeigt wurden. Ich sprang kontinuierlich von oben nach links, alle Arten von Seltsamkeiten. Aber mit diesen Einstellungen ist alles gelöst. Hoffe es hilft jedem auf der Suche.

Lucian Minea
quelle
0

Nur mit

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

Dies könnte nicht ausreichen, wenn Popover über ein BootstrapDialog-Modal angezeigt wird, das auch body als Container verwendet und einen höheren Z-Index hat.

Ich komme mit diesem Fix, der Interna von Bootstrap3 verwendet (funktioniert möglicherweise nicht mit 2.x / 4.x), aber die meisten modernen Bootstrap-Installationen sind 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);
    }
    // ...
});

Auf diese Weise können verschiedene Popover unterschiedliche Z-Indizes haben, einige befinden sich im BootstrapDialog-Modal, während andere darüber liegen.

Dmitriy Sintsov
quelle
0

In meinem Fall musste ich die Popover-Vorlagenoption verwenden und der HTML-Vorlage meine eigene CSS-Klasse hinzufügen:

        $("[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
quelle
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
quelle
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
Ajay
quelle
0

Wenn ein übergeordnetes Element Stile enthält, die ein Popover beeinträchtigen, möchten Sie einen benutzerdefinierten Container angeben, damit der HTML-Code des Popovers stattdessen in diesem Element angezeigt wird.

Angenommen, das übergeordnete Element für ein Popover ist body, dann können Sie es verwenden.

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

Ein anderer Fall kann sein, dass Popover in einem anderen Element platziert wird und Sie Popover über diesem Element anzeigen möchten. Dann müssen Sie dieses Element im Datencontainer angeben. Beispiel: Angenommen, wir haben ein Popover in einem Bootstrap-Modal mit der ID 'modal-two'. Dann müssen Sie 'data-container' auf 'modal-two' setzen.

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

Dies könnte mit der Z-Index-Masterliste für variables.less zu tun haben. Stellen Sie im Allgemeinen sicher, dass Ihre Datei variables.less korrekt und aktuell ist.

Scott Simpson
quelle