Popover Preview
A popover is a small surface that appears when someone interacts with a component to give nonessential, contextual information without blocking them.
Popovers can have structured content and interactive components. If you need to show a more complex layout or block the page behind, try a dialog. For unstructured plain text, try a tooltip.
Resources
Layout
Sizing and overflow
By default, there are no size constraints on popovers. They’ll grow to accommodate the content within them. For the best user experience, limit the dimensions of popovers so that they fit the needs of your layout without blocking any important information in the main UI.
For overflow content in a popover, set overflow: scroll to make any hidden content accessible.
Vertical scroll
Horizontal scroll
If content exceeds the available width or height of the popover. The overflow content is available through scrolling. Scrollbars should ideally only be used in 1 axis - Horizontal or Vertical. Except for parts of the content which require two-dimensional layout for usage or meaning.
Positioning
Position popovers so that people can tell what the information relates to. Don’t cover important information that’s helpful to see at the same time as the popover content.
In Figma, set the beak position with the beak component property. In code, use the positioning prop and positioning shorthand .
Accessibility
Nesting popovers
Don’t nest popovers. Too many popovers can distract from the original context and make it hard for people to interact with the content. If the information is essential or too robust for a popover, include it on the main page or in another surface like a panel.
Trapping focus
Using the trapFocus prop sets aria-hidden to true on parent elements when the popover is open. People who navigate by keyboard can still interact with the browser by tabbing in and out but won’t be able to access other focusable elements on the page without selecting Esc to dismiss the popover.
Content
Content in popovers should never be essential for someone to complete a task. It also shouldn’t repeat information that’s available in the main UI. Popovers are small, so use them for brief, helpful information. Short sentences or sentence fragments are best. If additional context or a more advanced description is needed, try placing a “Learn more” link at the bottom of the popover. The link target should open in a new window or panel.
Popover with link