← Back to Docs
Design System
Popover Design Patterns
Lightweight contextual overlays that appear on hover, focus, or click — without stealing focus or blocking the underlying UI.
Anatomy
Trigger → Arrow → Content → Actions
Placement Strategy
Top· Center
Default for tooltips and dropdowns above triggers
Bottom· Start
Natural reading flow for menus and selects
Right· Center
Side panels and nested navigation flyouts
Left· End
RTL-aware mirroring for bidirectional layouts
Interaction Model
| Trigger | Dismiss | Use Case |
|---|---|---|
| Hover | Mouse leave + 150ms delay | Tooltips, previews |
| Click | Click outside / Escape | Menus, selects, date pickers |
| Focus | Blur / Tab away | Autocomplete, search suggestions |
| Manual | Programmatic only | Onboarding tours, guided flows |
Guardrails
1
Never nest popovers deeper than 2 levels — use a drawer or modal instead.
2
Clamp to viewport edges with 8px padding; flip axis when overflow is detected.
3
One popover visible at a time per trigger group — dismiss siblings on open.
4
Respect prefers-reduced-motion: disable entrance/exit animations.