Popover
气泡卡片
Aliases:气泡卡片弹出卡片浮层气泡框弹出面板点击弹出的小卡片帮助气泡
What is it
A non-modal layer that pops up beside its trigger on click, carrying medium-complex content such as text, a mini-form or a date picker. No backdrop and no blocking of the rest of the page; clicking outside or pressing Esc closes it.
Name disambiguation
A popover is a non-blocking anchored overlay with free-form content. A tooltip is read-only on hover. A dropdown list holds commands only.
Interactive playground
Try it. Make an informed choice.Open the popover and inspect its content and dismissal.
Loading lab…
What to look for
- 01Position it near its trigger without obscuring essential actions.
- 02Interactive content must remain keyboard accessible.
✓ When to use
- Interactive content on click (mini-form, filters, color picker)
- Explanations longer than a one-line tooltip
- The page must stay visible and usable
✕ When not to use
- A one-line hint — use a tooltip
- Forced confirmation or long flows — use a modal
- Scroll-heavy content — use a drawer
Variants
Plain
纯文本
Help text only, the lightest
Interactive
交互式
Contains inputs and buttons
Rich
富内容
Image or structured info card
Implementation
position: absolutez-indexbox-shadowtransform-originAnchor to the trigger with absolute positioning (or measure and flip like floating-ui to prevent overflow). Close on outside click: listen for pointerdown on document and check the target; Esc closes too and focus moves into the panel. Enter with scale 0.95→1 plus fade, 150–200ms; respect prefers-reduced-motion.
Platform API
popover[popover]role="dialog"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| HTML | popover attribute |
| shadcn/ui | Popover |
| MUI | Popover |
| AntD | Popover |
Compare
Full comparison →| Popover气泡卡片 | Bottom Sheet底部抽屉 | Drawer抽屉 | Modal模态框 | |
|---|---|---|---|---|
| Interruption | Low — no backdrop, page stays live | Medium-high — backdrop blocks, but a swipe dismisses fast | High — backdrop covers the page while open | High — backdrop blocks the page |
| Content capacity | Medium — small interactive content | Medium-high — action lists and short forms fit | High — long lists and forms fit | Medium — short content and small forms |
| Mobile friendly | Poor — anchored position overflows easily | Excellent — the thumb zone is the bottom of the screen | Good — edge sliding feels natural | Medium — go full-screen for long content |
Related concepts
A small text bubble that appears briefly on hover, explaining icon buttons, abbreviations or truncated text. Purely informational and non-interactive, it disappears on mouse leave; usually shows after a ~300ms delay to avoid flicker while moving across the screen.
ComponentsSimilarA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsAlternativeA panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsAlternativeA menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.
ComponentsSimilarNot to be confused with
A tooltip is brief read-only on hover; a popover is interactive on click.
A dropdown list is commands; popover content is free-form.
A modal dims the page; a popover does not, and dismisses on outside click.