Build Assets
UI Component
Popover
Floating panel anchored to a trigger, holding rich content or controls without leaving the page.
Platform: bothTags: overlay, floating, contextual, anchored
Purpose
Reveals secondary content or controls in context, anchored to the element that opened it. Use when the content is richer than a tooltip but does not warrant a full modal.
Anatomy
- Trigger: button or element that toggles the popover
- Panel: surface with 1px border, 8–12px radius, elevation shadow
- Optional arrow/beak pointing at the trigger
- Content region: 12–16px padding
- Positioned via a collision-aware placement (flips when near a viewport edge)
States
- Closed: not rendered / display none
- Open: panel visible, focus moved inside (or to first focusable)
- Repositioned: flips side when the preferred placement overflows the viewport
- Dismissing: closes on outside click, Escape, or trigger toggle
Tokens
spacing
panelPadding: 14pxanchorGap: 8px
sizing
minWidth: 180pxborderRadius: 10pxborderWidth: 1px
Do
- Anchor to the trigger and keep it in view with collision detection
- Close on outside click, Escape, and re-activating the trigger
- Return focus to the trigger when the popover closes
- Keep content lightweight - it is contextual, not a page
Don't
- Nest popovers within popovers
- Use a popover where a tooltip (label only) or modal (blocking task) fits better
- Trap the user - always provide an obvious way to dismiss
- Let the panel overflow off-screen instead of flipping
Accessibility
- Trigger has aria-haspopup and aria-expanded reflecting state
- Move focus into the panel on open; restore to trigger on close
- Escape closes the popover
- Panel is linked to the trigger via aria-controls