Popover
A small floating panel anchored to a trigger element, used for short contextual content.
⚙Settings
⌗Billing
⇄Switch team
⏻Sign out
Popovers appear next to their trigger and are dismissed by clicking outside, pressing Escape, or selecting an action. They are smaller and less disruptive than dialogs and richer than tooltips. HTML now ships a native `popover` attribute that handles open/close, light dismissal, and the top layer for you. Anchor positioning (CSS `anchor-name` and `position-anchor`) is the new CSS feature that handles placing popovers next to their trigger without JS measurements.
Also called
floating panelpop-up panelanchored panel
When to use
- Short contextual content tied to a trigger
- Non-blocking choices like menus or filters
- When a tooltip is too small but a dialog is too heavy
When not to use
- When the content requires a focused, blocking task (use a dialog)
- When the content is informational only and read-on-hover (use a tooltip)
- Long-form content that won't fit anchored to a trigger
Related
Source
Apple HIG ('Popovers'). W3C ARIA Authoring Practices. HTML `popover` attribute is widely supported as of 2024. CSS Anchor Positioning is shipping in Chrome and Edge.