Tooltip
Il Tooltip è una componente che viene richiamata al passaggio del mouse (hover) per fornire informazioni su un determinato elemento o processo.
I tooltip - così come i popover (vedere sotto) - possono essere inseriti all’interno di modali secondo necessità.
Quando le modali vengono chiuse, anche le descrizioni comandi e i popover all’interno vengono automaticamente ignorati.
Nello specifico, In base alla dimensione e alla composizione del testo un tooltip può essere composto da una o più righe.
Per la spiegazione di processi si consiglia di utilizzare un tooltip con area più ampia in modo da poter fornire tutte le informazioni necessarie.
Testo Base
1
2
3
4
5
6
7
<p>Testo Base
<sup>
<svg class="icon icon-xs icon-info align-top" data-bs-toggle="tooltip" data-bs-placement="top" title="Breve testo esplicativo">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-info-circle"></use>
</svg>
</sup>
</p>
Posizionamento
Per il posizionamento è sufficiente impostare l’attributo data-bs-placement sul tag svg.
Tooltip in alto
Tooltip in basso
Tooltip a destra
Tooltip a sinistra
<svg class="icon icon-xs icon-info align-top" data-bs-toggle="tooltip" data-bs-placement="top" title=". . .">
<svg class="icon icon-xs icon-info align-top" data-bs-toggle="tooltip" data-bs-placement="bottom" title=". . .">
<svg class="icon icon-xs icon-info align-top" data-bs-toggle="tooltip" data-bs-placement="left" title=". . .">
<svg class="icon icon-xs icon-info align-top" data-bs-toggle="tooltip" data-bs-placement="right" title=". . .">Abilitazione
Per abilitare il funzionamento dei tooltip, nella pagina deve essere inserito il seguente codice:
<script>
document.addEventListener("DOMContentLoaded", function() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
</script>Documentazione tecnica
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 relativa pagina