Creare Popover con Bootstrap

Un popover è una sorta di fumetto con delle informazioni aggiuntive che compare vicino ad un elemento, quando si fa clic su di esso.

Un popover viene creato a partire dall’elemento a cui è associato. Immaginiamo, ad esempio, di voler visualizzare un popover al clic su un pulsante (ma potrebbe trattarsi di qualsiasi altro elemento come una immagine), bisognerà, innanzi tutto creare il pulsante e assegnargli l’attributo data-toggle="popover". Bisognerà poi specificare il contenuto del popover mediante l’attributo data-content.

<a class="btn btn-success" href="#"
  data-toggle="popover"
  data-content="Testo prova del popover">
  Ciao</a>

Fatto questo bisogna attivare il popover via Javascript. Per attivare con una riga di codice tutti i popover di una pagina, si possono attivare tutti gli elementi che contengono l’attributo data-toggle="popover".

$('[data-toggle="popover"]').popover();

Così facendo abbiamo costruito un popover nella sua forma più semplice, che si attiva, sulla destra del pulsante, al clic sul pulsante stesso. Ad un secondo clic si disattiva (toggle).

In realtà possono essere specificate diverse altre opzioni per il popover. Ad esempio, gli si può assegnare un titolo, lo si può aprire in una posizione diversa e lo si può attivare al passaggio del mouse sul pulsante… Per fare tutte queste cose basta aggiungere gli opportuni attributi data-* in questo modo:

<a class="btn btn-success"  href="#"
  data-toggle="popover"
  data-content="Testo prova del popover"
  data-original-title="Titolo del popover"
  data-trigger="hover"
  data-placement="bottom">
  Ciao</a>

Gli attributi che abbiamo passato al pulsante per specificare il comportamento del popover potevano anche essere specificati come opzioni, mediante il codice Javascript che attiva il popover. L’esempio che abbiamo realizzato sopra, quindi, può anche essere reso come segue. Il risultato è assolutamente identico:

<a class="btn btn-success" href="#" data-toggle="popover" >Ciao</a>

$('[data-toggle="popover"]').popover({
  content: 'Testo prova del popover',
  title: "Titolo del popover",
  trigger: "hover",
  placement: "bottom"
});

La tabella che segue riepiloga gli attributi/opzioni che possono essere specificati per i popover

Attributo	Tipo	Valore predefinito	Descrizione
animation	booleano	true	Il popover compare e scompare con un effetto di dissolvenza (fade)
html	booleano	false	Permette di inserire codice HTML nel corpo del popover.
placement	stringa o funzione	rigth	Permette di specificare la posizione del popover rispetto all’elemento a cui è associato. I valori possibili sono top | bottom | left | right | auto.
selector	stringa	falso	Permette di specificare un elemento a cui associare il popover che non sarà più posto accanto all’elemento che lo attiva
trigger	stringa	click	Permette di specificare l’evento che attiva il popover. I valori possibili sono click | hover | focus | manual.
title	stringa	"	Permette di specificare un titolo per il popover se questo non è presente
content	stringa	"	Permette di specificare un contenuto per il popover se questo non è presente
delay	numero | oggetto	0	Permette di specificare un ritardo per la comparsa e la scomparsa del popover. Se si usa un oggetto, questo deve avere una struttura del genere: delay: { show: 500, hide: 100 }
container	stringa | false	false	Associa il popover ad uno specifico elemento. Questo è utile per posizionare il popover nel flusso del documento accanto all’elemento che attiva il popover in modo da evitare che il popover si sposti se si ridimensiona la finestra.

Metodi

Bootstrap dispone di alcuni metodi per operare sui popover

• .popover(‘show’): mostra il popover;
• .popover(‘hide’): nasconde il popover;
• .popover(‘stoggle’): nasconde e mostra alternativamente il popover;
• .popover(‘destroy’): nasconde ed elimina il popover.

Eventi

Come gli alert, i popover dispongono di una serie di eventi che permettono di eseguire azioni in determinati momenti:

• show.bs.popover: si verifica appena viene richiamato il metodo show;
• shown.bs.popover: si verifica quando il popover è completamente mostrato (la trasformazione CSS è completa);
• hide.bs.popover: si verifica appena viene richiamato il metodo hide;
• hidden.bs.popover: si verifica quando il popover è completamente nascosto (la trasformazione CSS è completa).