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.
Das funktioniert für mich
quelle
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.
quelle
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äßigOder der andere Ansatz, der nicht so gut ist, wäre,
z-index
den Popover zu erhöhen . Sie können dies entweder mit@zindexPopover
den Less-Dateien oder direkt durch Überschreiben tunWenn 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.
quelle
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.quelle
Wenn data-container = "body" nicht funktioniert, versuchen Sie es mit zwei anderen Eigenschaften:
Der Z-Index sollte die maximale Grenze sein.
quelle
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'})
quelle
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 Ü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.
quelle
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.
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.
quelle
Nur mit
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.
Auf diese Weise können verschiedene Popover unterschiedliche Z-Indizes haben, einige befinden sich im BootstrapDialog-Modal, während andere darüber liegen.
quelle
In meinem Fall musste ich die Popover-Vorlagenoption verwenden und der HTML-Vorlage meine eigene CSS-Klasse hinzufügen:
CSS:
quelle
quelle
quelle
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.
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.
quelle
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.
quelle