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 by using the
overlay properties respectfully.
It is recommended to place Popovers shallowly in the DOM.
- 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.
The Popover's focus will navigate content sequentially to preserve meaning and expected use in support of Success Criterion 2.4.3: Focus Order. For this reason the first element depicted visually in the Popover will recieve keyboard focus, such as the component's close button (default).
It is strongly recommended to have focusable elements cycle through Popover where
false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is
open only the contents and focusable elements are accessible.
|Moves focus to next focusable element. If the current focus is the last element and
false, focus will cycle to the first element.
|Moves focus to previous focusable element. If the current focus is the first element and
false, focus will cycle to the last element.
|Closes the component.