Tooltip
Mostra definizioni e contesto al passaggio del mouse. Definisci termini, spiega acronimi o collega contenuti correlati senza appesantire la pagina.
Aggiungi testo al passaggio del mouse per definire termini, spiegare acronimi o collegare pagine correlate senza appesantire il contenuto principale.
Usa i Tooltip quando:
- Definisci termini in linea senza interrompere la lettura
- Spieghi acronimi che alcuni lettori potrebbero non conoscere
- Fornisci contesto utile ma non essenziale
- Colleghi contenuti correlati con un invito all'azione
Tooltip di base
Passa il mouse su APIUn insieme di protocolli che permettono alle applicazioni software di comunicare. per vedere la definizione.
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>Con intestazione
Aggiungi un titolo sopra il testo del suggerimento:
Passa il mouse su APIAPIApplication Programming Interface: un insieme di protocolli che permettono alle applicazioni software di comunicare. per vedere la definizione con un titolo.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
API
</Tooltip>Con collegamento di invito all'azione
Aggiungi un link per approfondire:
Scopri di più sulle APIAPIApplication Programming Interface: un insieme di protocolli che permettono alle applicazioni software di comunicare.Scopri di più → nella nostra documentazione.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols..."
cta="Learn more"
href="/components/overview"
>
API
</Tooltip>Utilizzo in linea
I Tooltip funzionano in linea con il testo. Puoi spiegare termini come HTMLHyperText Markup Language, CSSCascading Style Sheets o JSJavaScript direttamente nel testo.
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.Tooltip e altri componenti
| Necessità | Componente |
|---|---|
| Definire un termine in linea | Tooltip |
| Spiegare un concetto in dettaglio | Expandable o sezione separata |
| Avvisare su qualcosa di importante | Callout (Note, Warning) |
| Mostrare codice contestuale | CodeGroup o codice in linea |
Regola pratica: i Tooltip servono per definizioni rapide (1-2 frasi). Le spiegazioni più lunghe vanno nel contenuto principale o in un Expandable.
Proprietà
Il testo del tooltip mostrato al passaggio del mouse.
Testo mostrato sopra il tip.
Testo del link di invito all'azione.
URL per l'invito all'azione (obbligatorio con cta).
Il testo che attiva il tooltip.
Accessibilità
- I Tooltip sono accessibili da tastiera (Tab per mettere il focus, compaiono al focus)
- Usa
role="tooltip"per gli screen reader - Il testo che attiva il tooltip ha una sottolineatura tratteggiata per indicare l'interattività