Superpositions

Infobulle

تلميحةTooltip

Stablesrc/dsm/components/tooltip.tsx
L'infobulle affiche un texte d'appoint au survol ou au focus d'un élément, généralement une icône ou une action condensée. Elle est purement visuelle et ne doit jamais porter une information indispensable.

Import

import { TooltipProvider } from "@/dsm/components/tooltip";

Exemples

Par défaut

Sur une action en icône seule.

LTR

Positions

top, bottom, inline-start, inline-end.

LTR

Barre d'actions d'un dossier

Plusieurs infobulles partageant un même provider.

LTR

Dossier n° 2026-114872

Renouvellement de passeport biométrique

Usage

Quand l'utiliser

  • Utilisez une infobulle pour clarifier une icône seule (imprimer, télécharger, copier) déjà pourvue d'un `aria-label`.
  • Regroupez toutes les infobulles d'une même vue sous un seul `TooltipProvider` pour partager le délai d'apparition.

Quand ne pas l'utiliser

  • N'y placez jamais une information obligatoire à la compréhension : les écrans tactiles ne peuvent pas déclencher un survol.
  • Ne l'utilisez pas pour un texte d'aide déjà visible en permanence à côté du champ.

Accessibilité & langues

Accessibilité

  • Le déclencheur doit toujours porter son propre `aria-label` ou son propre texte visible : l'infobulle ne le remplace pas.
  • Les infobulles sont désactivées sur les dispositifs tactiles, conformément aux recommandations Base UI.

RTL & multilingue

  • `side` accepte les valeurs logiques `inline-start` / `inline-end` : la position bascule automatiquement selon le sens de lecture.
  • Le petit repère (carré pivoté) est positionné par Base UI et miroité en RTL pour les côtés inline-start / inline-end.

Propriétés

TooltipProvider
PropriétéTypeDéfautDescription
delaynumber0Délai en millisecondes avant l'apparition de l'infobulle.
Tooltip
PropriétéTypeDéfautDescription
content*ReactNode—Texte affiché dans l'infobulle.
side"top" | "bottom" | "inline-start" | "inline-end"topCôté logique d'apparition, mirroré en RTL.
sideOffsetnumber4Distance en pixels entre le déclencheur et l'infobulle.
children*ReactElement—Élément déclencheur, rendu via `Tooltip.Trigger`.

Composants liés