Popover
You might say
Click an avatar to show a small profile card beside it.
Open a small panel with extra information or controlsA popover is anchored to a trigger and can contain richer content than a tooltip, such as a preview, explanation, or a few controls. It should not carry a long workflow, and its opening and closing behavior must work with keyboard and touch input.
Know first
When to use it
- Show a profile preview
- Explain a chart point
- Offer a few contextual controls
- Display compact supporting contentNotification settings Manage preferences →
When NOT to use it
- Put essential information only behind hover
- Build a long form inside a small floating panel
- Open it without a clear anchor
- Let it cover the control needed to close it
Anatomy
Notification settings
Manage preferences →
🔔
A floating panel anchored to its trigger.
Optional title that states what the panel contains
It may contain lists, details, links, or controls—unlike a tooltip.
Open on click or hover, such as from an avatar
Variants
User Card
Lin
maya-lee
Product Manager
Click on the avatar or name to view identity information
Filter
Filter status
☑ In progress
☐ Completed
When several filters can expand in place without taking up page space
With Link
Shortcut keys
⌘S Save · ⌘P Publish
View all →When a brief explanation needs a link to more detail
Typical use cases
Profile preview
Project workspace
🔔
Alex Chen
Product Manager · Shenzhen
Chart details
NameOwnerStatus ▾
Filter status
☑ In progress
☐ Completed
☐ Archived
Formatting controls
✎⬇⌘
Shortcut keys
⌘S Save · ⌘P Publish
View all →
Context help
Message Center
🔔
Notification settings
New comment alerts
System announcements
Further reading