Popover
A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.
Features
- Traps focus within the popover.
- Flexible and unopinionated.
- Animates and positions out of the box.
When to use
See our design pattern around overlays to learn why and when you should use this component.
Examples
With button trigger
With arrow
Position on right side
Align content
Match trigger width
Controls container
Accessibility
Adheres to the Dialog WAI-ARIA design pattern. See Radix documentation for details.
Related components
- Feature tip: Used to help users learn about new or unfamiliar interface features.
- Help popover: An icon button with a question mark that reveals help information on click or tap.
- Modal: A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
- Tooltip: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.