The Popover component provides additional interactive content or information related to an interface element, typically triggered by a user interaction like a mouse hover or click. Similar to the other container components, it is designed to be flexible, customisable, and accessible, with various sizes and positions to choose from.
Do's
- ensure that the content is optimised for different devices and the content is adapting well to multiple viewports
- make sure that the Popover content is brief and easy to understand
- use a trigger element that offers a clear affordance indicator within the context the Popover is used in
Don'ts
- do not use small or hard-to-click trigger elements
- do not use the Popover component for critical information or actions
When to use
- use to complement contextual information that is not essential
- offering quick access to related content or actions
When Not to Use
- do not use to hide large pieces of content, use Accordion or Expandable instead
- do not hide critical information or actions that require user attention or are part of the page's goal