Popover
Un popover est une boîte de dialogue flottante utilisée pour donner plus d'informations sur un élément ou une fonctionnalité de l'interface utilisateur.
Description
Un popover est une boîte de dialogue flottante utilisée pour donner plus d'informations sur un élément ou une fonctionnalité de l'interface utilisateur.
Celle-ci apparaît lorsque l'utilisateur clique sur un élément (bouton ou zone) et disparaît lorsque l'utilisateur clique en dehors de ses limites.
Plateformes
Anatomie
- Titre (optionnel)
- Description : donne des informations supplémentaires sur l'élément auquel le popover est associé
- Bouton (optionnel) : redirige l'utilisateur vers une page contenant davantage d'informations
- Flèche : indique l'élément auquel le popover est associé
Usage
Quand l'utiliser ?
- Dans une application pour donner plus d'informations sur un élément.
- Dans une application pour onboarder les utilisateurs en leur présentant les nouvelles fonctionnalités, les modifications apportées à une interface, etc…
Tooltip vs. Popover
Bien que très similaires, les tooltips et popovers ne s'utilisent pas pour les mêmes raisons et n'ont pas les mêmes comportements.
- Le tooltip contient uniquement des descriptions brèves alors que le popover peut contenir un titre, une description et un bouton
- Le tooltip apparait lors du survol d'un élément, le popover apparait au clic d'un bouton ou d'une zone
- L'utilisateur ne peut pas interagir avec le contenu d'un tooltip, mais bien avec celui d'un popover (copier/coller, cliquer sur le bouton d'action).
Do's and don'ts
-
Do
Utiliser les popovers dans un context adapté. Par exemple : pour présenter des fonctionnalités de manière interactive.
-
Don't
Ne pas l’utiliser pour de simples aides ou définitions et ne pas le déclencher au survol
Anatomie
- Titre (optionnel)
- Description : donne des informations supplémentaires sur l'élément auquel le popover est associé
- Bouton (optionnel) : redirige l'utilisateur vers une page contenant davantage d'informations
- Flèche : indique l'élément auquel le popover est associé
Usage
Quand l'utiliser ?
- Dans une application pour donner plus d'informations sur un élément.
- Dans une application pour onboarder les utilisateurs en leur présentant les nouvelles fonctionnalités, les modifications apportées à une interface, etc…
Tooltip vs. Popover
Bien que très similaires, les tooltips et popovers ne s'utilisent pas pour les mêmes raisons et n'ont pas les mêmes comportements.
- Le tooltip contient uniquement des descriptions brèves alors que le popover peut contenir un titre, une description et un bouton
- Le tooltip apparait lors du survol d'un élément, le popover apparait au clic d'un bouton ou d'une zone
- L'utilisateur ne peut pas interagir avec le contenu d'un tooltip, mais bien avec celui d'un popover (copier/coller, cliquer sur le bouton d'action).
Do's and don'ts
-
Do
Utiliser les popovers dans un context adapté. Par exemple : pour présenter des fonctionnalités de manière interactive.
-
Don't
Ne pas l’utiliser pour de simples aides ou définitions et ne pas le déclencher au survol
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.