Popover
Popovers are floating, dismissible containers for small to medium amounts of content and interactions.
Overview
Popover is useful for providing non-critical interactions in space restrained workflows, which float over other elements in the z-axis. Avoid putting large amounts of content and using scrollbars in Popovers.
Popover positioning can be automatic or set manually in the interface.
For minimal text-only content, consider using Tooltip. For workflows that require more space and focus, consider using Modal.
Usage
- Secondary workflow support that can be invoked from an action
- Descriptions of content
- A few contextual actions or inputs to modify an element
- Clicking an element to show date, author, or other relevant details
Sample
Best practices
Below are important guidelines on using the Popover component.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next focusable element. If the current focus is the last element and focus is false, focus will cycle to the first element. |
Tab and Shift | Moves focus to previous focusable element. If the current focus is the first element and focus is false, focus will cycle to the last element. |
Esc | Closes the component. |
Writing and copy
Popover text should be short and to the point, supporting the content where it was invoked from. For complex or crucial content, please consider Modal.
- Recommended character maximum: 450