Das Bootstrap-Popover wird nicht über allen Elementen angezeigt

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.

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

Das funktioniert für mich

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

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.

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.

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.

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.

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

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.

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.

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.

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

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

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

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>

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.