Tooltip

Aggiungi testo al passaggio del mouse per definire termini, spiegare acronimi o collegare pagine correlate senza appesantire il contenuto principale.

Usa i tooltip per:

• Definire termini in linea senza interrompere il flusso di lettura
• Spiegare acronimi che alcuni lettori potrebbero non conoscere
• Fornire contesto utile ma non essenziale
• Collegare contenuti correlati con un invito all'azione

Tooltip di base

Passa il mouse su APIUn insieme di protocolli che consentono alle applicazioni software di comunicare. per visualizzare la definizione.

<Tooltip tip="A set of protocols for software applications to communicate.">
  API
</Tooltip>

Con intestazione

Aggiungi un'intestazione sopra il testo della descrizione:

Passa il mouse su APIAPIInterfaccia di programmazione delle applicazioni: un insieme di protocolli che consentono alle applicazioni software di comunicare. per visualizzare la definizione con un'intestazione.

<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
  API
</Tooltip>

Con collegamento di invito all'azione

Includi un collegamento per consentire agli utenti di approfondire:

Scopri di più sulle APIAPIInterfaccia di programmazione delle applicazioni: un insieme di protocolli che consentono alle applicazioni software di comunicare.Scopri di più → nella 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 anche in linea con il testo. Puoi spiegare HTMLLinguaggio di markup per ipertesti, CSSFogli di stile a cascata o i termini relativi a 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

Regola generale: usa i tooltip per definizioni rapide (1-2 frasi). Inserisci le spiegazioni più lunghe nel contenuto principale o in un Expandable.

Proprietà

Accessibilità

• I tooltip sono accessibili tramite tastiera (premi Tab per applicare il focus; vengono visualizzati quando ricevono il focus)
• Usano role="tooltip" per gli screen reader
• Il testo attivatore ha una sottolineatura tratteggiata che ne indica l'interattività

E adesso?