- Guidelines
- React API Reference
- Blazor API Reference
Popovers display additional content or options related to a specific UI element. Triggered by user actions like clicking or hovering, they offer extra information without moving the user away from their current context.
General Guidelines
| Aspect | Best Practice |
|---|---|
| Usage | Reveal supplementary content, options, or help text related to a particular element upon user interaction (click or hover). |
| Visual Hierarchy | Position popovers near their triggering element (top, bottom, left, right). They should not obscure the entire page or content. |
| Behavior | Ensure popovers can be easily dismissed (e.g., by clicking outside or using a close button). |
| Psychological Impact | Popovers appear only when needed, providing contextual relevance without clutter. They encourage exploration and allow user-driven access. |
| Examples | Dropdown menus, tooltips with additional info, or action menus related to a specific item. |
Format and Punctuation
Capitalization and Punctuation: Follow sentence case with proper punctuation. Keep text concise and grammatically correct.Active Voice and Clarity: Use active voice and avoid jargon. If complex terms are necessary, provide brief explanations.Do’s and Don’ts
Do
- Provide extra information or options that enhance the user’s current task.
- Keep popover text short and easy to scan.
Don't
- Use popovers for critical or essential information that must be seen immediately.
- Overwhelm users with lengthy text or unnecessary details.