Popover vs. info-bulle
Une infobulle donne un petit indice. Une popover peut contenir plus de texte, des choix ou des boutons.
Utilisez une info-bulle lorsqu'un petit nombre de mots suffit. Utilisez un popover lorsqu'une personne doit lire ou faire plus sans quitter la page.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Popover
Une popover est un petit panneau attaché au contrôle qui l'a ouverte. Elle peut contenir du contenu structuré et des actions sans bloquer la page.
popover attribute / PopoverSélectionnez un avatar pour ouvrir un petit profil. Il montre le rôle de la personne, ses coordonnées et une action Suivre.
- Utilisez-le lorsque
- Utilisez-le lorsque le contenu appartient à côté de son déclencheur et que les gens peuvent continuer à utiliser la page.
- Ne l'utilisez pas lorsque
- N'utilisez-le jamais pour un court indice contenant uniquement un label. Utilisez un infobulle à la place.
- Nom utilisé dans le code
popover attribute / Popover
Infobulle
Une info-bulle est une courte note sur un contrôle. Elle s'ouvre quand la souris la survole ou le clavier la met en évidence. On ne peut pas l'utiliser comme un bouton.
role="tooltip"Lorsqu'un bouton icône obtient le focus clavier, « Copier le lien » apparaît. Le focus reste sur le bouton.
- Utilisez-le lorsque
- Utilisez-le pour expliquer une courte étiquette de contrôle à la fois lors du survol de la souris et de la mise au point clavier.
- Ne l'utilisez pas lorsque
- Ne mettez jamais d'actions, d'instructions impératives à lire, ou de contenu long dans une info-bulle.
- Nom utilisé dans le code
role="tooltip"
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| PopoverPopover | Utilisez-le lorsque le contenu appartient à côté de son déclencheur et que les gens peuvent continuer à utiliser la page. | N'utilisez-le jamais pour un court indice contenant uniquement un label. Utilisez un infobulle à la place. | popover attribute / Popover |
| InfobulleTooltip | Utilisez-le pour expliquer une courte étiquette de contrôle à la fois lors du survol de la souris et de la mise au point clavier. | Ne mettez jamais d'actions, d'instructions impératives à lire, ou de contenu long dans une info-bulle. | role="tooltip" |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Popover (Popover), Infobulle (Tooltip) pour notre flux utilisateur réel. Utilisez cette règle : Une infobulle donne un petit indice. Une popover peut contenir plus de texte, des choix ou des boutons. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.