Popovers are floating, dismissible containers for small to medium amounts of content and interactions.
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.
- 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
Below are important guidelines on using the Popover component.
|Moves focus to next focusable element. If the current focus is the last element and |
|Moves focus to previous focusable element. If the current focus is the first element and |
|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