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.

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.

<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>