Tooltip

Il tooltip è un componente informativo attivabile al passaggio del cursore (hover) sopra l'elemento al quale è applicato (solitamente una Call to Action). Può contenere solo informazioni testuali ed è possibile gestirne il posizionamento.
Qui potrai trovare la User Interface, lo snippet e le modalità di utilizzo per i tooltip nell’Ecosistema digitale Turismo Cultura.


Tooltip in alto
Tooltip in basso
Tooltip a sinistra
Tooltip a destra


                                            
<!-- Tooltip in alto --> 
<button type="button" class="btn dms-btn dms-btn--primary"
    data-toggle="tooltip" data-placement="top" title="Tooltip in alto">
    Visualizza tooltip in alto
</button>

<!-- Tooltip in basso --> 
<button type="button" class="btn dms-btn dms-btn--primary"
    data-toggle="tooltip" data-placement="bottom" title="Tooltip in basso">
    Visualizza tooltip in basso
</button>

<!-- Tooltip a sinistra --> 
<button type="button" class="btn dms-btn dms-btn--primary"
    data-toggle="tooltip" data-placement="left" title="Tooltip a sinistra">
    Visualizza tooltip a sinistra
</button>

<!-- Tooltip a destra --> 
<button type="button" class="btn dms-btn dms-btn--primary"
    data-toggle="tooltip" data-placement="right" title="Tooltip a destra">
    Visualizza tooltip a destra
</button>

Utilizzo

Il markup richiesto per un tooltip è costituito da due attributi: data-toggle="tooltip" e title. Un modo ti attivare tutti i tooltip presenti in pagina è tramite il seguente esempio lato javascript (già inserito all'interno del progetto): $(function () {$('[data-toggle="tooltip"]').tooltip()}). Il testo visualizzabile nel box viene inserito all'interno dell'attributo title ed il suo posizionamento rispetto all'elemento di riferimento viene gestito con l'attributo data-placement al quale sono applicabili i valori "top", "bottom", "left" o "right".

Cose da sapere:

  • il tooltip è un componente visualizzabile esclusivamente in modalità desktop, poichè attivabile solo all'hover
  • i tooltip con titoli vuoti non saranno mai visualizzati
  • specifica container: "body" per evitare problemi di rendering in componenti più complessi (come nei gruppi di input, gruppi di bottoni, etc)
  • attivare i tooltip su elementi nascosti non funzionerà
  • quando attivati da collegamenti ipertestuali che si estendono su più righe, i tooltip verranno centrati. Usa white-space: nowrap sui tuoi <a> per evitare questo comportamento
  • i tooltip per gli elementi .disabled o disabled devono essere attivati da un elemento contenitore
  • i tooltip funzionano sia con la tastiera che per gli utenti dotati di tecnologia assistiva
  • i tooltip devono essere nascosti prima che i loro elementi corrispondenti siano stati rimossi dal DOM

Per ulteriori informazioni visita la pagina Tooltips di Bootstrap.