Il plugin Tooltip
Il plugin Tooltip è piccola finestra pop-up che appare quando l'utente sposta il puntatore del mouse su un elemento:
Tip: I plugin possono essere inclusi singolarmente (utilizzando Bootstrap's individuali "tooltip.js" di file), o tutti in una volta (usando "bootstrap.js" o "bootstrap.min.js" ).
Come creare un Tooltip
Per creare un tooltip, aggiungere il data-toggle="tooltip" attributo per un elemento.
Utilizzare il title attributo per specificare il testo che dovrebbe essere visualizzato all'interno del tooltip:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> Nota: I tooltip deve essere inizializzato con jQuery: selezionare l'elemento specificato e chiamare il tooltip() metodo.
Il seguente codice consentirà a tutti i suggerimenti contenuti nel documento:
Esempio
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Prova tu stesso " Posizionamento Tooltips
Per impostazione predefinita, viene visualizzata la descrizione comandi sulla parte superiore dell'elemento.
Utilizzare il data-placement attributo per impostare la posizione del tooltip in alto, in basso, a sinistra oa destra dell'elemento:
Esempio
<a href="#" data-toggle="tooltip" data-placement="top"
title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip"
data-placement="bottom" title="Hooray!">Hover</a>
<a href="#"
data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a
href="#" data-toggle="tooltip" data-placement="right"
title="Hooray!">Hover</a>
Prova tu stesso " Suggerimento: È inoltre possibile utilizzare il data-placement attributo con un valore di "auto", che permetterà al browser a decidere la posizione del tooltip. Ad esempio, se il valore è "auto left" , la casella verrà visualizzato sul lato sinistro quando possibile, altrimenti sulla destra.
Completare Bootstrap Tooltip di riferimento
Per un riferimento completo di tutte le opzioni tooltip, metodi ed eventi, vai alla nostra Bootstrap JS Tooltip di riferimento .