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

AspectBest Practice
UsageReveal supplementary content, options, or help text related to a particular element upon user interaction (click or hover).
Visual HierarchyPosition popovers near their triggering element (top, bottom, left, right). They should not obscure the entire page or content.
BehaviorEnsure popovers can be easily dismissed (e.g., by clicking outside or using a close button).
Psychological ImpactPopovers appear only when needed, providing contextual relevance without clutter. They encourage exploration and allow user-driven access.
ExamplesDropdown 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.