Popover
Une couche compacte et refermable attachée au contrôle ou à l’objet qui l’a ouverte.
Définition
Définition
Un popover est une petite couche ancrée au contrôle exact qui l’a ouvert, flottant au-dessus de la page sans rien déplacer d’autre.
Problème résolu
Problème résolu
Un popover répond à une question rapide exactement là où elle a été posée, sans réelle interruption — la page reste telle quelle, et l’utilisateur le referme généralement lui-même une fois terminé.
Quand l’utiliser
Quand l’utiliser
- Sélecteurs compacts
- Contrôles de mise en forme
- Aide contextuelle courte
Quand ne pas l’utiliser
Quand ne pas l’utiliser
- L’interaction est bloquante
- Le contenu n’a pas d’ancrage visuel clair
Exemple
Exemple
- 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>
)}Contre-exemple
Contre-exemple
Un popover contenant un formulaire d’adresse à plusieurs champs est une erreur fréquente. Dès qu’il y a plusieurs champs à valider et une erreur à corriger, le point d’ancrage n’a plus de sens et le contenu a besoin d’un drawer ou de sa propre page.
Questions à se poser
Questions à se poser
- 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 ?
Patterns liés