Tooltip
Infobulle
Une courte aide non interactive qui apparaît au survol ou lorsque le contrôle reçoit le focus clavier.
Avec vos mots
Ce que les gens décrivent
Alias documentés : bulle d'aide, aide au survol, info-bulle
- une petite étiquette quand je survole l'icône
- un texte qui explique un bouton au focus
- une mini aide près du point d'interrogation
- afficher le sens de l'icône sans cliquer
- un texte d'aide qui disparaît quand je pars
- le nom d'une icône seule dans une barre d'outils
Essayer
Petites surfaces contextuelles
Comparer les trois comportements
Scénario comparatif partagé : Un espace projet doit révéler une aide brève, des détails complémentaires ou une courte liste d'actions depuis un contrôle compact sans quitter la tâche en cours.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Infobulle
Choisir Infobulle seulement pour un contenu bref sans élément interactif ; utiliser Popover pour des contrôles ou un contenu plus riche.
Votre mission
Révéler le nom de l'icône au pointeur et au clavier, puis fermer avec Échap.
Cas limite à vérifier
Sur écran tactile, l'icône garde un moyen visible d'obtenir son nom et aucune information ne dépend uniquement du survol.
Mission
Info-bulle - Tooltip
Révéler le nom de l'icône au pointeur et au clavier, puis fermer avec Échap.
Exporter le rapport
report-july.pdf
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Déclencheur
Le contrôle qui ouvre ou révèle la surface.
À utiliser quand
- Expliquer une icône peu familière
- Développer un libellé court tronqué
À éviter quand
- L'information est indispensable pour terminer la tâche
- Le contenu nécessite des liens, boutons ou champs
Comparer les concepts proches
Contrairement à une Infobulle, un Popover peut contenir du contenu interactif ; contrairement au Menu déroulant, il ne se limite pas à une liste d'actions.
Fenêtre contextuelleUtiliser le Menu déroulant pour des commandes comme Modifier ou Archiver, pas pour choisir une valeur de formulaire comme Select ni pour un contenu riche comme Popover.
Menu d'actions déroulantBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Révéler au focus ou au survol
Le survol ou le focus clavier révèle l'information après un court délai.
Fermer avec Échap
Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.
États
Infobulle masquée
Infobulle masquée
Infobulle visible
Infobulle visible
Transitions d’état
Infobulle masquée → Infobulle visible
Le survol au pointeur ou le focus clavier atteint le déclencheur.
Infobulle visible → Infobulle masquée
Le survol et le focus quittent le déclencheur, ou Échap ferme l’aide.
Scénarios de test
- Contexte
- Une barre d'outils d'analyse compacte contient une icône d'export peu familière.
- Mission
- Révéler le nom de l'icône au pointeur et au clavier, puis fermer avec Échap.
- État principal
- L'aide apparaît près du bouton d'export focalisé, qui reste utilisable.
- Cas limite
- Sur écran tactile, l'icône garde un moyen visible d'obtenir son nom et aucune information ne dépend uniquement du survol.
Accessibilité
- Role
- tooltip
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- Le focus reste sur le déclencheur ; l'infobulle n'entre jamais dans l'ordre de tabulation.
- Fermeture
- Elle se ferme avec Échap et lorsque le focus et le pointeur quittent le déclencheur et la surface.
- Scroll
- Le défilement de la page reste disponible. La surface flottante reste ancrée à son déclencheur ou se ferme lorsque celui-ci quitte la zone visible.
- Annonce
- Le déclencheur référence la description de l'infobulle afin que la technologie d'assistance la lise sans déplacer le focus.
- Clavier
- Tab place le focus sur le déclencheur
- Échap ferme l'infobulle visible
Bindings
Tooltip.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- tooltip
- radixPrimitive
- Tooltip
- shadcnRecipe
- Tooltip
- runtimeDependency
- @radix-ui/react-tooltip@1.2.12
- packageName
- @radix-ui/react-tooltip
- exportName
- Tooltip.Root
- exactVersion
- 1.2.12
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Radix Tooltip implements the disclosure behavior, but content, timing, touch fallback, and final accessibility testing remain product responsibilities.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Tooltip Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Tooltip: tooltip role, trigger relationship, focus retention, and Escape dismissal guidance.
- Radix Primitives: Tooltip
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Tooltip: documented Radix Tooltip parts, open-state control, positioning, and dismissal behavior.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.