Come verificare se un popover di bootstrap twitter è visibile o no?

Question

Ho un elemento $('#anElement') con un potenziale popover attaccato, come

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div> 

Vorrei solo sapere come controllare se il popover è visibile o meno: come questo può essere realizzato con jQuery?

Answer 1

Se questa funzionalità non è incorporata nel quadro che si sta utilizzando (non è più twitter bootstrap, solo bootstrap), quindi sarà necessario ispezionare l'HTML generato/modificato per creare questa funzionalità di bootstrap.

Dai uno sguardo allo popupver documentation. C'è un pulsante che puoi usare per vederlo in azione. Questo è un ottimo posto per esaminare gli elementi HTML che sono al lavoro dietro la scena.

Apri crack gli strumenti degli sviluppatori di Chrome o firebug (di firefox) e dai un'occhiata a cosa sta succedendo. Sembra che ci sia semplicemente una <div> essere inserito dopo che il pulsante -

<div class="popover fade right in" style="... /> 

Tutto quello che dovete fare è verificare l'esistenza di tale elemento. A seconda di come il vostro codice è scritto, si potrebbe usare qualcosa di simile -

if ($("#popoverTrigger").next('div.popover:visible').length){ 
    // popover is visible 
} 

#popoverTrigger è l'elemento che ha attivato che popover di apparire in primo luogo e, come abbiamo notato in precedenza, bootstrap accoda semplicemente il div popover dopo la elemento.

Answer 2

Controlla se il div specificato è visibile.

if ($('#div:visible').length > 0) 

o

if ($('#div').is(':visible')) 

Answer 3

Non esiste un metodo implementato in modo esplicito nel plugin boostrap popover quindi è necessario trovare un modo per aggirare questo. Ecco un trucco che ritorna vero o falso se il plugin è visibile o meno.

var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in'); 
console.log(isVisible); // true or false 

Si accede ai dati memorizzati dal plugin popover che è in realtà un oggetto Popover, chiama il metodo dell'oggetto tip() che è responsabile per il recupero l'elemento punta, e poi controlla se l'elemento restituito ha la classe in, che è indicativo che il popover collegato a quell'elemento è visibile.

---

Si dovrebbe anche controllare se c'è un popover attaccato per assicurarsi che si può chiamare il metodo tip():

if ($('#anElement').data('bs.popover') instanceof Popover) { 
    // do your popover visibility check here 
} 

Answer 4

Nella versione corrente di Bootstrap, è possibile verificare se il proprio elemento ha impostato aria-describedby. Il valore dell'attributo è id del popover effettivo.

Così, per esempio, se si desidera modificare il contenuto del popover visibile, si può fare:

var popoverId = $('#myElement').attr('aria-describedby'); 
$('#myElement').next(popoverid, '.popover-content').html('my new content'); 

Answer 5

Utilizzando un popover con boostrap 4, punta() non sembra essere una funzione più . Questo è un modo per verificare se un popover è abilitato, in sostanza, se ha cliccato ed è attiva:

if ($('#element').data('bs.popover')._activeTrigger.click == true){ 
...do something 
} 

Answer 6

forse l'opzione più affidabile sarebbe ascoltando eventi nascoste mostrati /, come illustrato di seguito. Ciò eliminerebbe la necessità di scavare in profondità nel DOM che potrebbe essere soggetto a errori.

var isMyPopoverVisible = false;//assuming popovers are hidden by default 

$("#myPopoverElement").on('shown.bs.popover',function(){ 
isMyPopoverVisible = true; 
}); 

$("#myPopoverElement").on('hidden.bs.popover',function(){ 
isMyPopoverVisible = false; 
}); 

Questi eventi sembrano essere attivato anche se si nasconde/mostra/alternare la popover a livello di codice, senza l'interazione dell'utente.

P. S. testato con BS3.