Popover
A lightweight contextual panel that reveals additional information when a trigger is activated. Closes on Escape or clicking outside.
When to use
Do
- ✓Use a popover to surface additional context that not all users need to see at all times.
- ✓Use the description prop for a single short sentence; use the default slot for richer content.
- ✓Choose a direction that keeps the panel within the viewport — prefer "bottom" or "end" near page edges.
- ✓Pair a popover with a form label to explain a complex option without cluttering the layout.
Don't
- ✕Don't put critical information only inside a popover — users who miss the trigger will never see it.
- ✕Don't use a popover for interactive actions like forms or menus — use a modal or dropdown instead.
- ✕Don't use more than one popover open at a time — there is no automatic mutual exclusivity.
- ✕Don't rely on hover to open a popover — the default trigger is click for keyboard and touch compatibility.