Popover

The popover component is used to reveal additional content and functionalities. Its visibility is triggered by a control element (e.g., button).

Popovers remain actively open until a user dismisses it in one of the following ways:

• Presses the Esc key
• Clicks outside of the Popover
• Performs another action that closes the Popover

When to avoid

• Do not hide important information inside of a popover that the user may need in order to complete a task or workflow.
• Do not use on non-interactive elements (for example, div, span, p).
• Do not use if the popover needs take up a large amount of the size of the screen.
• Do not have multiple popovers open at the same time.
• Do not nest one popover within another popover.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

Popover keyboard interaction and focus

• Opens via the Enter or Space keys, or by clicking the trigger element.
• On open, focus moves into the Popover container to navigate elements inside with the Tab key.
• Dismissed by tabbing out of the Popover, pressing the Escape key, or clicking outside.
• When dismissed, focus returns to the trigger element.

ARIA attributes

• The trigger element has aria-expanded set to true or false based on the open state.
• The trigger element has aria-controls set to the id of the Popover element.
• The trigger element has aria-haspopup set to the suitable role attribute of the Popover, depending on the type of content.