Components
Popover
A popover is a non-modal dialog that appears when a user clicks a trigger element. It's used to display additional information or a set of related actions in a small container that is attached to the trigger.
When to use
Action menus
Use a popover to display a list of actions when a user clicks a button, such as a "Share" or "Filter" button.
Action menus
Use a popover to display a list of actions when a user clicks a button, such as a "Share" or "Filter" button.
Action menus
Use a popover to display a list of actions when a user clicks a button, such as a "Share" or "Filter" button.
Interactive information
It's ideal for showing content that includes interactive elements, like buttons, links, or simple form controls.
Interactive information
It's ideal for showing content that includes interactive elements, like buttons, links, or simple form controls.
Interactive information
It's ideal for showing content that includes interactive elements, like buttons, links, or simple form controls.
Mobile context menus
On touch devices, popovers are a great way to reveal information or actions that would be shown in a hover card on desktop.
Mobile context menus
On touch devices, popovers are a great way to reveal information or actions that would be shown in a hover card on desktop.
Mobile context menus
On touch devices, popovers are a great way to reveal information or actions that would be shown in a hover card on desktop.
When to avoid
On hover
If the content should be revealed by hovering, use a tooltip (for simple text) or a hover card (for richer, non-interactive content). A popover should always be triggered by a click.
On hover
If the content should be revealed by hovering, use a tooltip (for simple text) or a hover card (for richer, non-interactive content). A popover should always be triggered by a click.
On hover
If the content should be revealed by hovering, use a tooltip (for simple text) or a hover card (for richer, non-interactive content). A popover should always be triggered by a click.
Critical information
For critical information, warnings, or complex forms that require the user's full attention, use a modal dialog instead.
Critical information
For critical information, warnings, or complex forms that require the user's full attention, use a modal dialog instead.
Critical information
For critical information, warnings, or complex forms that require the user's full attention, use a modal dialog instead.
Primary navigation
A dedicated menu or navigation bar is more appropriate.
Primary navigation
A dedicated menu or navigation bar is more appropriate.
Primary navigation
A dedicated menu or navigation bar is more appropriate.
Specifications
Position
Top
Left
Right
Bottom
Top
Left
Right
Bottom
Top
Left
Right
Bottom
Top
Left
Right
Bottom
Beak alignment
Start
Middle
End
Start
Middle
End
Start
Middle
End
Content types
Text
Custom
Text
Custom
Text
Custom
Text
Custom
Behavior
Trigger
The popover must appear on a user click or tap.
Dismissal
The popover should close when the user clicks outside of it, clicks the trigger element again, or presses the "Esc" key.
Focus management
For accessibility, when the popover opens, keyboard focus should move to the first interactive element inside it. When it closes, focus should return to the original trigger element.
Trigger
The popover must appear on a user click or tap.
Dismissal
The popover should close when the user clicks outside of it, clicks the trigger element again, or presses the "Esc" key.
Focus management
For accessibility, when the popover opens, keyboard focus should move to the first interactive element inside it. When it closes, focus should return to the original trigger element.
Trigger
The popover must appear on a user click or tap.
Dismissal
The popover should close when the user clicks outside of it, clicks the trigger element again, or presses the "Esc" key.
Focus management
For accessibility, when the popover opens, keyboard focus should move to the first interactive element inside it. When it closes, focus should return to the original trigger element.
Anatomy
1
Content
A flexible slot designed for or custom content.
2
Beak
A small caret that visually connects the popover to its trigger element and can be positioned on any side of the content area via the position prop.
Value
Popover
Popover