Plugin Bootstrap Tooltip
Il plug-in descrizione comando
Il plug-in Tooltip è una piccola finestra pop-up che appare quando l'utente sposta il puntatore del mouse su un elemento:
Suggerimento: i plug-in possono essere inclusi singolarmente (usando il file "tooltip.js" di Bootstrap) o tutti insieme (usando "bootstrap.js" o "bootstrap.min.js").
Come creare una descrizione comando
Per creare una descrizione comando, aggiungi l' data-toggle="tooltip"
attributo a un elemento.
Utilizzare l' titleattributo per specificare il testo da visualizzare all'interno del suggerimento:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Nota: le descrizioni comandi devono essere inizializzate con jQuery: selezionare l'elemento specificato e chiamare il tooltip()metodo.
Il codice seguente abiliterà tutti i suggerimenti nel documento:
Esempio
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Suggerimenti per il posizionamento
Per impostazione predefinita, la descrizione comando apparirà sopra l'elemento.
Utilizzare l' data-placementattributo per impostare la posizione della descrizione comando sul lato superiore, inferiore, sinistro o destro 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>
Suggerimento: puoi anche utilizzare l' data-placementattributo con un valore di " auto", che consentirà al browser di decidere la posizione della descrizione comando. Ad esempio, se il valore è " auto left", la descrizione comando verrà visualizzata a sinistra quando possibile, altrimenti a destra.
Riferimento completo dei suggerimenti di Bootstrap
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi dei tooltip, vai al nostro Bootstrap JS Tooltip Reference .