Popover
Il affiche une petite couche au bon endroit pour un choix ou une aide rapide, sans déranger le reste de la page.
Ce qu’un popover ajoute sans bouger la page
Un popover ouvre une petite couche flottante depuis le contrôle qui l’a demandé, sans faire bouger le reste de la page.
Le vrai job
Répondre vite, au bon endroit
Un popover répond à une question rapide exactement là où elle se pose. La page ne bouge pas, l’ancrage garde le contexte clair, et l’utilisateur peut le refermer dès qu’il a fini.
Le bon contexte
Quand l’ancrage fait presque tout le travail
- Sélecteurs compacts
- Contrôles de mise en forme
- Aide contextuelle courte
Mauvais plan
Quand l’ancrage ne suffit plus
- L’interaction est bloquante
- Le contenu n’a pas d’ancrage visuel clair
Dans la vraie vie
Ce qui tient bien dans un popover
- Sélecteur de couleur
- Menu de mise en forme
- Aide courte sur un champ
Voir l’exemple technique
<button aria-expanded={open} aria-controls="formatting">
Formatting
</button>
{open && (
<div id="formatting" role="group" aria-label="Formatting">
{/* compact controls */}
</div>
)}Le piège classique
Un formulaire d’adresse n’est pas taillé pour un popover
Mettre tout un formulaire d’adresse dans un popover, c’est là que ça déraille. Dès qu’il y a plusieurs champs à valider et des erreurs à rattraper, l’ancrage n’aide plus et le contenu a besoin d’un drawer ou de sa propre page.
Avant de choisir
Les questions à se poser avant de le faire flotter
- Le contenu appartient-il clairement à un contrôle ou un objet précis ?
- L’utilisateur peut-il le refermer sans devoir prendre de décision ?
- Aurait-il encore du sens si le déclencheur sortait de l’écran ?
- Contient-il plus d’un champ ou d’une action courte ?
Tu hésites avec…