# Composant d’infobulle pour les applications Stripe

Utilisez des infobulles pour intégrer des précisions à propos d'un élément ou d'un sujet particulier.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=8.

Pour ajouter le composant `Tooltip` à votre application :

```js
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
```

Voici un aperçu de deux composants `Tooltip` avec chaque type de `label` :

Les infobulles apparaissent au premier plan lorsqu’un utilisateur survole un élément cible avec sa souris. Utilisez les infobulles pour fournir une information contextuelle supplémentaire à propos d’un élément ou d’un sujet particulier. Vous pouvez utiliser les infobulles comme **descriptions** ou comme **étiquettes**.

Évitez d’intégrer du contenu interactif (tel que des liens) à l’intérieur d’une infobulle ; en effet, les personnes qui utilisent un clavier ne pourront pas y accéder.

### Propriétés des infobulles

| Propriété   | Type                                                                                                                                                                                                                                                                                                                                                                                              |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`  | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant.                                                                                                                                                                                                                                                                                                                                     |
| `trigger`   | (Obligatoire)
  `React.ReactElement`

  L’élément cible qui doit être utilisé comme déclencheur du `Tooltip`.                                                                                                                                                                                                                                                                                     |
| `delay`     | (Facultatif)
  `number | undefined`

  Combien de temps, en millisecondes, attendre avant d’afficher le `Tooltip` au survol.                                                                                                                                                                                                                                                                      |
| `placement` | (Facultatif)
  `("bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom") | undefined`

  Emplacement du `Tooltip` par rapport à l’élément déclencheur. |
| `type`      | (Facultatif)
  `("label" | "description") | undefined`

  La variante de style du `Tooltip`.                                                                                                                                                                                                                                                                                                      |

## Positionnement

Vous pouvez placer les infobulles dans l’une des quatre directions principales et les aligner plus précisément le long d’un axe secondaire, ce qui donne au total 12 options de placement possibles par rapport au `trigger`. Le positionnement automatique fait les ajustements nécessaires de manière à ce que l’infobulle reste visible dans la fenêtre d’affichage.

## Délai

Les infobulles ont un court délai d’apparition une fois que leur élément déclencheur a été survolé. Vous pouvez paramétrer le délai d’activation à l’aide de la propriété `delay`. Les infobulles apparaissent toujours immédiatement après que leur élément déclencheur soit la cible d’un focus clavier.

Les infobulles apparaissent immédiatement au survol lorsqu’une autre infobulle est déjà active.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=9.

Pour ajouter le composant `Tooltip` à votre application :

```js
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
```

Voici un aperçu de deux composants `Tooltip` avec chaque type de `label` :

Les infobulles apparaissent au premier plan lorsqu’un utilisateur survole un élément cible avec sa souris. Utilisez les infobulles pour fournir une information contextuelle supplémentaire à propos d’un élément ou d’un sujet particulier. Vous pouvez utiliser les infobulles comme **descriptions** ou comme **étiquettes**.

Évitez d’intégrer du contenu interactif (tel que des liens) à l’intérieur d’une infobulle ; en effet, les personnes qui utilisent un clavier ne pourront pas y accéder.

### Propriétés des infobulles

| Propriété   | Type                                                                                                                                                                                                                                                                                                                                                                                              |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`  | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant.                                                                                                                                                                                                                                                                                                                                     |
| `trigger`   | (Obligatoire)
  `React.ReactElement`

  L’élément cible qui doit être utilisé comme déclencheur du `Tooltip`.                                                                                                                                                                                                                                                                                     |
| `delay`     | (Facultatif)
  `number | undefined`

  Combien de temps, en millisecondes, attendre avant d’afficher le `Tooltip` au survol.                                                                                                                                                                                                                                                                      |
| `placement` | (Facultatif)
  `("bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom") | undefined`

  Emplacement du `Tooltip` par rapport à l’élément déclencheur. |
| `type`      | (Facultatif)
  `("label" | "description") | undefined`

  La variante de style du `Tooltip`.                                                                                                                                                                                                                                                                                                      |

## Positionnement

Vous pouvez placer les infobulles dans l’une des quatre directions principales et les aligner plus précisément le long d’un axe secondaire, ce qui donne au total 12 options de placement possibles par rapport au `trigger`. Le positionnement automatique fait les ajustements nécessaires de manière à ce que l’infobulle reste visible dans la fenêtre d’affichage.

## Délai

Les infobulles ont un court délai d’apparition une fois que leur élément déclencheur a été survolé. Vous pouvez paramétrer le délai d’activation à l’aide de la propriété `delay`. Les infobulles apparaissent toujours immédiatement après que leur élément déclencheur soit la cible d’un focus clavier.

Les infobulles apparaissent immédiatement au survol lorsqu’une autre infobulle est déjà active.


## See also

- [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md)
- [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md)
- [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)