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
You can say this to an AI Agent
Open a member popover from avatar click and keyboard focus. Anchor it to the trigger and include department, email, and two actionable controls. Support touch, Escape, outside-click dismissal, and pointer movement into the popover.
When to use it
- Show a profile previewans-studioView profile →
- Explain a chart pointFilter statusIn progressCompleted
- Offer a few contextual controlsKeyboard shortcuts⌘S Save · ⌘P PublishView all →
- Display compact supporting contentNotification settings Manage preferences →
When NOT to use it
- Put essential information only behind hoverSettings
- Build a long form inside a small floating panelHelp centerView all 24 articles →
- Open it without a clear anchor⚠ Delete this record?DeleteCancelConfirm
- Let it cover the control needed to close it📢 Scheduled maintenance this Saturday, 02:00–04:00. The service will be unavailable.
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check