Composants
Tooltip
Une infobulle contextuelle au survol et au focus d'un déclencheur. Passe-plat direct sur le
Tooltip d'Astryx : l'élément déclencheur est le children,
le texte à afficher va dans content.
import { Tooltip, IconButton } from "@forme-ch/ui/controls";
import { TrashIcon } from "@forme-ch/ui/icons";
<Tooltip content="Supprimer définitivement la facture">
<IconButton icon={<TrashIcon />} label="Supprimer" variant="ghost" />
</Tooltip>Placement
La prop placement ajuste la position relative au déclencheur. Survole chaque bouton pour la voir.
<Tooltip content="Au-dessus" placement="top"><Button label="top" /></Tooltip>
<Tooltip content="En dessous" placement="bottom"><Button label="bottom" /></Tooltip>
<Tooltip content="À gauche" placement="left"><Button label="left" /></Tooltip>
<Tooltip content="À droite" placement="right"><Button label="right" /></Tooltip>Sur des boutons-icône
Usage typique : nommer une action réduite à une icône. delay retarde l'apparition.
<Tooltip content="Modifier"><IconButton icon={<PencilSimpleIcon />} label="Modifier" /></Tooltip>
<Tooltip content="Télécharger le PDF" delay={600}>
<IconButton icon={<DownloadSimpleIcon />} label="Télécharger" />
</Tooltip>Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
content * | ReactNode | — | Contenu affiché dans l'infobulle. |
children * | ReactNode | — | Élément déclencheur — l'infobulle apparaît à son survol / focus. |
placement | string | — | Position de l'infobulle (ex. top, bottom, left, right). Casté as never côté Astryx. |
delay | number | — | Délai (ms) avant apparition au survol. |
Accessibilité
Une infobulle est un complément, jamais le seul porteur d'information essentielle. Sur un
IconButton, le label fournit déjà le nom accessible :
le tooltip ne fait que le rendre visible au survol. L'infobulle apparaît aussi au focus clavier et
disparaît à Échap. N'y mets pas d'élément interactif (lien, bouton) — elle n'est pas atteignable au clavier.
Do & Don't
✓ À faire
Un texte court et descriptif. Sur icône seule, doubler le label de l'IconButton par un tooltip cohérent.
✕ À éviter
Y cacher une information indispensable. Y placer des liens ou boutons. Déclencher un tooltip sur un élément non focusable.