Popover
Fenêtre contextuelle
Une petite surface contextuelle ouverte volontairement pour afficher du contenu ou des contrôles sans rendre toute la page modale.
Avec vos mots
Ce que les gens décrivent
Alias documentés : panneau contextuel, bulle interactive, fenêtre volante
- un petit panneau quand je clique sur le bouton d'info
- afficher des réglages supplémentaires près de ce contrôle
- une boîte flottante avec un lien dedans
- ouvrir de l'aide sans bloquer la page
- une petite carte ancrée au bouton
- cliquer pour révéler plus de détails sur place
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.
Fenêtre contextuelle
Contrairement à une Infobulle, un Popover peut contenir du contenu interactif ; contrairement au Menu déroulant, il ne se limite pas à une liste d'actions.
Votre mission
Ouvrir l'explication, parcourir son ordre de focus, puis la fermer sans perdre sa position.
Cas limite à vérifier
Quand l'espace manque, la gestion des collisions repositionne le panneau sans couvrir le déclencheur ni déplacer le focus de façon inattendue.
Mission
Fenêtre contextuelle - Popover
Ouvrir l'explication, parcourir son ordre de focus, puis la fermer sans perdre sa position.
Détail de la facture
Une ligne de service et les frais associés.
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
- Afficher une explication compacte avec un lien
- Modifier un petit groupe de réglages contextuels
À éviter quand
- La tâche nécessite un flux large ou modal
- La surface n'est qu'une courte aide passive
Comparer les concepts proches
Choisir Infobulle seulement pour un contenu bref sans élément interactif ; utiliser Popover pour des contrôles ou un contenu plus riche.
InfobulleUtiliser 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
Basculer à l'activation
Activer le déclencheur ouvre la surface, puis peut la refermer au second appui.
Fermer hors de la surface
Un appui hors de la surface non critique la ferme sans valider d'action.
Fermer avec Échap
Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.
États
Popover fermé
Popover fermé
Popover ouvert
Popover ouvert
Transitions d’état
Popover fermé → Popover ouvert
Le déclencheur est activé au pointeur, au toucher, avec Entrée ou Espace.
Popover ouvert → Popover fermé
Fermer est activé, Échap est pressé ou une interaction extérieure autorisée se produit.
Scénarios de test
- Contexte
- Un tableau de facturation propose une explication compacte des frais à l'usage et un lien vers les détails.
- Mission
- Ouvrir l'explication, parcourir son ordre de focus, puis la fermer sans perdre sa position.
- État principal
- Le panneau non modal s'ouvre près du libellé de facturation et son lien peut recevoir le focus.
- Cas limite
- Quand l'espace manque, la gestion des collisions repositionne le panneau sans couvrir le déclencheur ni déplacer le focus de façon inattendue.
Accessibilité
- Role
- dialog when the content needs a named interactive region
- 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 pour un contenu simple ou va de façon prévisible vers le premier contrôle pertinent.
- Fermeture
- Échap, le contrôle de fermeture ou un appui extérieur sans risque la ferme et restaure le focus sur le déclencheur.
- 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 expose l'état développé et référence la surface ; un dialogue nommé est annoncé lorsque ce pattern est utilisé.
- Clavier
- Entrée ou Espace ouvre depuis le déclencheur
- Tab parcourt le contenu interactif
- Échap ferme la fenêtre contextuelle
Bindings
Popover.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- popover
- radixPrimitive
- Popover
- shadcnRecipe
- Popover
- runtimeDependency
- @radix-ui/react-popover@1.1.19
- packageName
- @radix-ui/react-popover
- exportName
- Popover.Root
- exactVersion
- 1.1.19
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Radix Popover provides positioning and focus hooks; SkillCodex keeps the surface nonmodal and defines dismissal from the behavior contract.
Vérifier la source du binding
Sources
- Radix Primitives: Popover
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Popover: documented Radix Popover parts, focus hooks, positioning, and dismissal behavior.
- WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Popover: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.
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.