Anatomy
The Popover consists of three primary elements that work together to create floating containers that open on demand.
- Popover background, content
- Caret
- Trigger
Options
The Popover supports the following configurations to accommodate various overlay scenarios.
Content
Popovers can accept both text and custom content.
Placement
Note that placement of a Popover will adjust when not enough space is available.
Behavior
The Popover responds to space constraints with automatic positioning adjustments and flexible opening/closing behaviors.
Positioning Adjustments
The Popover makes automatic adjustments to its placement and dimensions when space is limited. It will:
- Auto flip when not enough space in the viewport is present.
- Resize the Popover when not enough space is present.
- Shift the Popover when scrolling to keep it in view.
These options can be turned off as needed.
Opening a Popover
Popovers can be configured to open in multiple ways.
Open on click
Open on hover
Closing a Popover
Popovers can be configured to close in multiple ways.
Close on click outside
By default Popovers close on click outside. Override this behavior as needed.
Close action in the Popover
An action inside the Popover can close it. The Popover itself does not provide a set style for showing this.
Usage Guidelines
Use the Popover when providing additional information or actions related to the element that triggers it, for use cases not covered by other components.
When to Use
Popovers are small overlays that provide additional information or actions related to the element that triggers it. Most potential use cases for Popovers are solved through other components. When a use case isn’t covered, Popovers can be used to create a UI pattern that the design system has not yet established, such as a tour flow.
When not to use
Popovers as a rule are not recommended to be used directly. The Menu and Combobox, both of which use Popover directly, cover most use cases for a Popover. Other overlay-type components, such as Tooltips and Dialogs, also cover use cases that a Popover could potentially use.
Alternatives
Popover vs Combobox
When a user needs to selects from many options, the Combobox should be used over the Popover. It is not recommended to recreate a combobox-like or select-like interaction with a Popover.
Popover vs Dialog
Both Dialogs and Popovers overlay elements on the page. In general, Dialogs are preferable when a situation requires user attention, and for more complicated flows.
| Popover | Dialog |
|---|
| Content allowed in the container? | Any content | Any content |
| Complexity of content? | From simple to a few interactions | From simple to high complex |
| Backdrop applied to page? | No | Yes |
| Usage | Tooltip | Popover |
|---|
| Can have a link? | Should not have interactive elements | Yes |
| Can have other interactive elements? | Should not have interactive elements | Yes |
| Open mechanic? | Hover or Focus | Click/Press, option for Hover or Focus |
| Can trap user focus? | No | Yes |
How to Use
Positioning a Popover
- Popovers will auto flip and shift by default in order to stay in view. Define a starting position based on element placement: when elements are near a screen edge, position the Popover to open in the opposite direction.
- Position Popovers in a way that minimizes obstruction of important elements.
- If the above are not relevant, a top position is considered the default placement.
An example where the Popover position aligns with the position of a larger group of actions.
Don’t add Popovers to non-interactive elements
Popovers cannot be accessed by keyboard when behind a non-interactive element. Consider adding this information on the page itself, or providing a dedicated help Button Icon.
Content
Content within the Popover should clearly communicate the additional information or actions available.
Keyboard Interaction
Users can navigate the Popover using standard keyboard controls.
| Key | Description |
|---|
| Space or Enter | When focusing on the trigger, opens the Popover |
| Escape | Closes the Popover when focus is on or inside the trigger or the content |
| Tab | When the Popover is modal, it cycles through all tab-able elements between the trigger and Popover, otherwise it behaves normally |
Accessibility
Trapping Focus
Popovers by default do not trap focus. Content of the Popover maintains the DOM order, unlike portaling, which allows natural tab behavior to work accessibly without trapping the focus. Enable focus trapping by using the modal prop.
For more guidance on managing focus with changing content, see changing content best practices. Last modified on January 23, 2026
