---
title: Info-bulle
description: "Affichez définitions et contexte au survol. Définissez des termes, expliquez des acronymes ou créez des liens vers du contenu connexe."
---

Ajoutez du texte au survol pour définir des termes, expliquer des acronymes ou créer des liens vers des pages connexes sans encombrer le contenu principal.

Utilisez les info-bulles lorsque :
- **Vous définissez des termes** en ligne sans interrompre la lecture
- **Vous expliquez des acronymes** que certains lecteurs pourraient ne pas connaître
- **Vous fournissez du contexte** utile mais non essentiel
- **Vous créez des liens vers du contenu connexe** avec un appel à l'action

## Info-bulle de base

Survolez <Tooltip tip="A set of protocols for software applications to communicate.">API</Tooltip> pour voir la définition.

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

## Avec titre

Ajoutez un titre au-dessus du texte de l'info-bulle :

Survolez <Tooltip headline="API" tip="Application Programming Interface: a set of protocols for software applications to communicate.">API</Tooltip> pour voir la définition avec un titre.

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

## Avec lien d'appel à l'action

Incluez un lien pour permettre aux utilisateurs d'en savoir plus :

Découvrez les <Tooltip headline="API" tip="Application Programming Interface: a set of protocols for software applications to communicate." cta="Learn more" href="/fr/components/overview">API</Tooltip> dans notre documentation.

```jsx
<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols..."
  cta="Learn more"
  href="/components/overview"
>
  API
</Tooltip>
```

## Utilisation en ligne

Les info-bulles fonctionnent en ligne avec le texte. Vous pouvez expliquer les termes <Tooltip tip="HyperText Markup Language">HTML</Tooltip>, <Tooltip tip="Cascading Style Sheets">CSS</Tooltip> ou <Tooltip tip="JavaScript">JS</Tooltip> en ligne.

```jsx
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.
```

## Info-bulles vs autres composants

| Besoin | Composant |
|------|-----------|
| Définir un terme en ligne | **Info-bulle** |
| Expliquer un concept en détail | Expandable ou section séparée |
| Avertir de quelque chose d'important | Callout (Note, Warning) |
| Afficher du code contextuel | CodeGroup ou code en ligne |

**Règle générale :** Les info-bulles sont faites pour les définitions rapides (1-2 phrases). Les explications plus longues appartiennent au contenu principal ou à un Expandable.

## Props

<ParamField name="tip" type="string" required>
  Le texte de l'info-bulle affiché au survol.
</ParamField>

<ParamField name="headline" type="string">
  Texte affiché au-dessus de l'info-bulle.
</ParamField>

<ParamField name="cta" type="string">
  Texte du lien d'appel à l'action.
</ParamField>

<ParamField name="href" type="string">
  URL pour l'appel à l'action (requis avec `cta`).
</ParamField>

<ParamField name="children" type="ReactNode">
  Le texte qui déclenche l'info-bulle.
</ParamField>

## Accessibilité

- Les info-bulles sont accessibles au clavier (Tab pour se concentrer, s'affiche au focus)
- Utilise `role="tooltip"` pour les lecteurs d'écran
- Le texte déclencheur a un soulignement en pointillés pour indiquer l'interactivité

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants en MDX
  </Card>
</Columns>