Tooltip
Un tooltip può essere collegato ad un tag HTML per far comparire una breve nota esplicativa.
Normalmente appare al passaggio del mouse sull’elemento cui è collegato. Viene disegnato in modo da non sovrapporsi all’elemento stesso.
Normalmente un tooltip contiene solo del testo semplice; anche se non è impossibile inserirvi un link, solitamente nel caso di debba farlo si usa un popover.
Nel caso serva il tooltip è comunque in grado contenere il testo andando a capo.
Posizionamento
<div class="container">
<div class="row">
<div class="col-12 col-md-4 offset-md-4">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
title="Breve testo esplicativo">Bottone con tooltip in alto
</button>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-4">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right"
title="Breve testo esplicativo">Bottone con tooltip a destra
</button>
</div>
<div class="col-12 col-md-4 offset-md-4">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left"
title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue.">Bottone con tooltip a sinistra
</button>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-4 offset-md-4">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom"
title="Breve testo esplicativo">Bottone con tooltip in basso
</button>
</div>
</div>
</div>Abilitazione
Per abilitare il funzionamento dell’esempio è stato inserito nella pagina il seguente codice:
<script>
document.addEventListener("DOMContentLoaded", function() {
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
})
</script>Per le altre modalità possibili sia di abilitazione dei tooltip sia di impostazione del tipo di comparsa e scomparsa di questi componenti, si veda la Documentazione di Bootstrap Italia
Riferimenti
Il contenuto di questa pagina si riferisce ai seguenti punti della Documentazione di Bootstrap Italia: