Quando dobbiamo mostrare un messaggio di aiuto all'utente, il tooltip di default offerto dal browser è comodo, ma non è di certo la soluzione più elegante. Negli anni sono stati creati diversi plugin per creare tooltip più o meno eleganti, ma al momento Bootstrap ne offre uno dei più semplici e visualmente gradevoli da utilizzare.

Il primo passo per utilizzare il plugin di Bootstrap è creare un oggetto HTML al quale attaccare il tooltip. All'oggetto dobbiamo aggiungere i seguenti tre attributi:

• data-toggle: da impostare su "tooltip";
• data-placement: da impostare su top-bottom-left-right per specificare dove far apparire il tooltip rispetto all'oggetto;
• title: da impostare con il testo del tooltip.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip in alto">Salva</button>

Una volta creato il codice HTML, dobbiamo istanziare il plugin nel seguente modo.

$('.btn').tooltip(options);

L'oggetto options può contenere diverse proprietà che sono specificate nella documentazione raggiungibile qui: http://getbootstrap.com/javascript/#tooltips.