Aggiungere tooltip ad una pagina può migliorare l'usabilita della stessa. Sebbene i browser mettano a disposizione un tooltip di default, questo può essere personalizzato nel contenuto ma non nell'aspetto grafico. Bootstrap permette di creare dei tooltip custom che possono anche essere personalizzati nell'aspetto grafico tramite CSS.

Nel codice che segue vediamo come creare un tooltip nel codice HTML.

<button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="left" 
  title="Tooltip">Tooltip</button>

La chiave di questo codice HTML sono gli attributi data-placement, che specifica la posizione del tooltip rispetto all'oggetto (left-right-top-bottom), e data-toggle che torna utile quando dobbiamo inizializzare il tooltip. Infatti, non basta il codice HTML a mostrare il tooltip, ma dobbiamo inizializzarlo a mano tramite Javascript. Per inizializzare tutti i tooltip di una pagina ossiamo scrivere il seguente codice.

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

Questo script viene lanciato al caricamento della pagina, e recupera tutti i tag HTML che hanno l'attributo data-toggle impostato a "tooltip" e gli associa il plugin tooltip di Bootstrap.