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's designed to be flexible, customisable, and accessible. It is available in various sizes and positions.
Do's
- ensure that the content is optimised for different devices and adapts to multiple viewports
- make sure that Popover content is brief and easy to understand
- use a trigger element
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, non-essential information
- to offer quick access to related content or actions
When not to use
- do not use to hide large pieces of content - use Accordion or Expandable
- do not hide critical information or actions that need a user's attention or are part of the page's goal