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 designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

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.