---
title: Tooltip
description: Visualizza definizioni e contesto al passaggio del mouse senza appesantire la pagina.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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 <Tooltip tip="Un insieme di protocolli che consentono alle applicazioni software di comunicare.">API</Tooltip> per visualizzare la definizione.

```jsx
<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 <Tooltip headline="API" tip="Interfaccia di programmazione delle applicazioni: un insieme di protocolli che consentono alle applicazioni software di comunicare.">API</Tooltip> per visualizzare la definizione con un'intestazione.

```jsx
<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 <Tooltip headline="API" tip="Interfaccia di programmazione delle applicazioni: un insieme di protocolli che consentono alle applicazioni software di comunicare." cta="Scopri di più" href="/it/components/overview">API</Tooltip> nella documentazione.

```jsx
<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 <Tooltip tip="Linguaggio di markup per ipertesti">HTML</Tooltip>, <Tooltip tip="Fogli di stile a cascata">CSS</Tooltip> o i termini relativi a <Tooltip tip="JavaScript">JS</Tooltip> direttamente nel testo.

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

| Esigenza | Componente |
|------|-----------|
| Definire un termine in linea | **Tooltip** |
| Spiegare un concetto in dettaglio | Expandable o una sezione separata |
| Segnalare qualcosa di importante | Callout (Note, Warning) |
| Mostrare codice contestuale | CodeGroup o codice in linea |

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

## Proprietà

<ParamField name="tip" type="string" required>
  Testo del tooltip visualizzato al passaggio del mouse.
</ParamField>

<ParamField name="headline" type="string">
  Testo visualizzato sopra la descrizione.
</ParamField>

<ParamField name="cta" type="string">
  Testo del collegamento di invito all'azione.
</ParamField>

<ParamField name="href" type="string">
  URL dell'invito all'azione (obbligatorio con `cta`).
</ParamField>

<ParamField name="children" type="ReactNode">
  Testo che attiva il tooltip.
</ParamField>

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

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>