Nello script #123 abbiamo visto come sfruttare Bootstrap per mostrare un tooltip. In questo script espandiamo l'idea parlando di come mostrare un vero e proprio popup accanto a un elemento. Bootstrap rende facile questo compito treamite il controllo popover. Questo controllo ci permette di definire il contenuto del popup direttamente dal codice HTML come nel seguente esempio.

<button type="button" 
  class="btn btn-default" 
  data-toggle="popover" 
  title="Popup title" 
  data-content="Popup content">
    Toggle popover
  </button>

L'attributo title definisce il titolo del popup. Se questo non è presente, il titolo non viene mostrato. L'attributo data-content definisce invece il contenuto del popover.
Il codice HTML definisce il contenuto del popup, ma da solo non basta in quanto dobbiamo inizializzare il popup singolarmente per tutti i controlli. Possiamo eseguire questa operazione tramite il seguente codice

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