popover bootstrap non visualizzato su tutti gli elementi

Question

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

I popover continuano a essere visualizzati correttamente, ma non vengono visualizzati sopra 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 qualche idea sul perché il comportamento del popover è cambiato, o come posso risolvere il problema? Grazie.

Answer 1

sono stato in grado di risolvere il problema impostando data-container="body" sull'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

Answer 2

Potrebbe avere a che fare con la lista master z-index su variables.less. In generale, assicurati che il tuo file variables.less sia corretto e aggiornato.

Answer 3

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

Dovresti provare a individuare gli elementi esatti con un ispettore web (in genere F12 sul tuo browser preferito) e controllare il loro effettivo z-index.

Se si trova questo valore, è possibile impostare inferiore alla popover che è z-index: 1010; by default

---

O l'altro approccio, non è buono, sarebbe quello di aumentare la z-index del popover. Si può fare neppure con il @zindexPopover nei file di meno o direttamente sovrascrivendo

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

---

Se non è possibile trovare una soluzione, si dovrebbe provare riprodurre il bug in qualcosa di simile this jsfiddle - si avrà probabilmente risolvere il problema durante il tentativo di ottenere il bug.

Answer 4

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

Ciò che risulta non ha avuto nulla a che fare con gli Z-indici, ma con uno dei tuffatori che hanno la proprietà di overflow CSS impostata come nascosta.

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

Answer 5

Ho avuto un problema simile con 2 elementi fissi - anche se l'heirachy z-index era corretto, il tooltip di bootstrap era nascosto dietro l'elemento con uno z-index inferiore.

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

Answer 6

Questo è il lavoro per me

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

Answer 7

Se i dati-container = "corpo" non opere che cercare altre due proprietà:

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

z-index dovrebbe essere limite massimo.

Answer 8

Questa soluzione migliore se si utilizza uib-bootsrap angolare è di utilizzare l'iniezione delle dipendenze per $ uibTooltipProvider, è possibile modificare il comportamento delle descrizioni comandi e dei popover per impostazione predefinita per tutte le descrizioni comandi.

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

$ uibTooltipProvider Attraverso il $ uibTooltipProvider, è possibile modificare il modo in cui i suggerimenti e le popovers comportamento di default; gli attributi sopra hanno sempre la precedenza. I seguenti metodi sono disponibili:

setTriggers (obj) (Esempio: { 'openTrigger': 'closeTrigger'}) - Estende le mappature di attivazione di default di cui sopra con mappature di tua scelta.

opzioni (obj) - Fornisce un set di valori predefiniti per alcuni attributi di descrizione comandi e di popover. Attualmente supporta quelli con il distintivo C.

Answer 9

usando solo

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

potrebbe non essere sufficiente quando si visualizzano popover nel corso di un modale BootstrapDialog, che utilizza anche il corpo come contenitore e ha un z-index superiore.

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

tale modo diversi popovers possono avere diversi z-index, alcuni sono sotto BootstrapDialog modale, mentre altri sono quelli sopra.

Answer 10

Nel mio caso ho dovuto utilizzare l'opzione modello 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; 
} 

Answer 11

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

Sopra risposte erano utile l'impostazione del valore nel contenitore dati ha fatto il lavoro ma se ho impostato data-container = "body", allora non si allinea correttamente nel mio caso. Così ho specificato la classe del div genitore del popover e ha funzionato bene.

html

dati-container = "testDiv"

js

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