popover bootstrap non visualizzato sopra tutti gli elementi

Sto lavorando su un sito bootstrap e dopo l'aggiornamento a bootstrap 2.2 da 2.0 tutto ha funzionato tranne il popover.

I popover si presentano ancora bene, ma non si presentano in cima a tutti gli altri elementi.

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

Qualcuno ha idea del perché il comportamento del popover è cambiato o come posso risolverlo? Grazie.

Sono stato in grado di risolvere il problema impostando data-container="body"l'elemento html

HTML esempio:

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

JavaScript esempio:

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

Scoperto da questo link: https://github.com/twitter/bootstrap/issues/5889

Questo sta funzionando per me

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

Ho appena avuto una situazione simile a questa, che coinvolge la libreria JQuery DataTables con scorrimento abilitato.

Ciò che si rivelò non aveva nulla a che fare con gli indici Z, ma con uno dei div racchiusi con la proprietà di overflow CSS impostata come nascosta.

L'ho risolto aggiungendo un evento al mio elemento innescando il popover che ha anche cambiato la proprietà di overflow del div responsabile in visibile.

La causa più probabile è che il contenuto visualizzato sopra il popover ha un valore più elevato z-index. Senza il preciso codice / stile, posso offrire due opzioni:

Dovresti provare a individuare gli elementi esatti con un ispettore web (di solito F12 sul tuo browser preferito) e verificarne l'effettivo z-index.

Se trovi questo valore, puoi impostarlo su un valore inferiore al popover che è z-index: 1010;di default

Oppure l'altro approccio, non altrettanto buono, sarebbe quello di aumentare z-indexil popover. Puoi farlo con i @zindexPopoverfile Less o direttamente eseguendo l'override

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

Se non riesci a trovare una soluzione, dovresti provare a riprodurre il bug in qualcosa come questo jsfiddle - probabilmente risolverai il problema mentre provi a ottenere il bug.

Ho avuto un problema simile con 2 elementi fissi - anche se l'erede z-index era corretta, la descrizione del bootstrap era nascosta dietro l'unico elemento con un indice z inferiore.

L'aggiunta ha data-container="body"risolto il problema e ora funziona come previsto.

Se data-container = "body" non funziona, prova altre due proprietà:

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

z-index dovrebbe essere il limite massimo.

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

Le risposte sopra sono state utili in quanto l'impostazione del valore nel contenitore di dati ha fatto il lavoro, ma se imposto data-container = "body", nel mio caso non si allinea correttamente. Quindi ho specificato la classe del div genitore di popover e ha funzionato bene.

html

Dati-container = "testDiv"

js

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

La migliore soluzione se stai usando uib-bootsrap angolare è usare l'iniezione di dipendenza per $ uibTooltipProvider, puoi cambiare il modo in cui le descrizioni comandi e i popover si comportano di default per tutte le descrizioni comandi.

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

$ uibTooltipProvider Tramite $ uibTooltipProvider, è possibile modificare il modo in cui le descrizioni comandi e i popover si comportano per impostazione predefinita; gli attributi sopra hanno sempre la precedenza. Sono disponibili i seguenti metodi:

setTriggers (obj) (Esempio: {'openTrigger': 'closeTrigger'}) - Estende le mappature di trigger predefinite sopra menzionate con mappature personalizzate.

options (obj) - Fornisce una serie di impostazioni predefinite per determinati attributi tooltip e popover. Attualmente supporta quelli con il badge C.

Molti anni dopo, ma come me, altri potrebbero cercarlo. Prendendo in considerazione tutti gli aggiornamenti, tutto ciò può essere risolto con le corrette opzioni di inizializzazione, in JavaScript.

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

Quelle impostazioni hanno risolto tutti i problemi. Avevo sfarfallio delle descrizioni dei comandi, che mostravano correttamente solo per metà degli oggetti sulla pagina, saltando dall'alto verso sinistra continuamente, ogni tipo di stranezza. Ma con quelle impostazioni tutto è risolto. Spero che possa aiutare chiunque cerchi.

Sto solo usando

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

potrebbe non essere sufficiente quando si visualizza popover su un modale BootstrapDialog, che utilizza anche body come contenitore e ha un indice z più alto.

Vengo con questa correzione che utilizza gli interni di Bootstrap3 (potrebbe non funzionare con 2.x / 4.x) ma la maggior parte delle installazioni Bootstrap moderne sono 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);
    }
    // ...
});

In questo modo diversi popover possono avere un diverso z-index, alcuni sono in modal BootstrapDialog, mentre altri ne sono sopra.

Nel mio caso ho dovuto usare l'opzione template popover e aggiungere la mia classe css al template 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;
}

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

Quando hai degli stili su un elemento genitore che interferiscono con un popover, ti consigliamo di specificare un contenitore personalizzato in modo che l'HTML del popover appaia invece all'interno di quell'elemento.

Ad esempio, dire che il genitore per un popover è body, quindi è possibile utilizzare.

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

Un altro caso potrebbe essere quando popover è posizionato all'interno di un altro elemento e si desidera mostrare popover su quell'elemento, quindi sarà necessario specificare quell'elemento nel contenitore di dati. es: supponiamo di avere un popover all'interno di un bootstrap modale con id come 'modal-two', quindi dovrai impostare 'data-container' su 'modal-two'.

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

Potrebbe avere a che fare con l'elenco master z-index su variabili.less. In generale, assicurati che il tuo Variabile.less file sia corretto e aggiornato.