Popover
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
Live Demo
Actually clickableWhat you just saw:The month picker that appears beside the calendar icon, the little menu that floats out after you tap "More", the palette that opens after you tap a color swatch — each one sits right next to its own trigger.
What it actually is
The defining trait of a popover is attachment: it always grows out near its trigger and points back at where it came from. That is what makes it read differently from a modal in the center of the screen or a bottom sheet at the bottom of the screen.
Anatomy · What it's made of
Trigger触发元素
Gets an active background while pressed
Surface浮层本体
White background + shadow to read as floating
Arrow小箭头
Points at the trigger, optional
Content内容
Menu items / a form / a preview
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The content needs a visual relationship with a specific element | Yes |
| The content is light (a menu, a picker, a small form) | Yes |
| The page underneath needs to stay interactive | Yes |
| The user has to be blocked from finishing the current operation | No |
| The content is long and needs a lot of scrolling | No |
Putting a long list in a popover is a common mistake — once users scroll to the bottom they lose the thread of where it came from.
On mobile, popovers tend to overflow the viewport because there is not enough room, so positioning needs care.
Similar Patterns
Don't mix these upPopoverCurrent
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
Tooltip
文字提示
A small line of text that appears on hover, telling you what an unfamiliar icon actually does.
In one line:A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
Tooltip
文字提示
A small line of text that appears on hover, telling you what an unfamiliar icon actually does.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
How to tell AI
Three levels of promptAdd the component name and specifics
After clicking the "Format" button, open a popover below it offering four type styles to choose from, with a small arrow pointing at the trigger button. Esc and outside clicks close it.
Don't just say this to AI
Bad → BetterDon't say this to AI
Pop something out next to this.
Say this instead
Open a popover below the trigger button (role=menu) with a small arrow pointing back at the trigger, positioned with Floating UI and flipped above automatically when there is not enough space, closed by Esc or an outside click, focus returned to the trigger.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.