气泡卡片
Popover
别名:气泡卡片弹出卡片浮层气泡框弹出面板点击弹出的小卡片帮助气泡
这是什么
点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
名词辨析
Popover 是锚定触发元素的非打断浮层，内容任意；Tooltip 只读、悬停即出；Dropdown 列表只放命令。
交互实验室
试一试，再决定怎么用点击触发入口打开浮层，检查内容与关闭方式。
正在加载实验室…
使用时关注什么
- 01浮层应靠近触发位置，避免遮住关键操作。
- 02若内容可交互，必须支持键盘访问。
✓ 适用场景
- 点击后需要承载可交互内容（小表单、过滤、颜色选择）
- 补充说明的信息量超过一行 tooltip
- 需要保持底层页面可见且可用
✕ 不适用场景
- 只有一句话说明（改用 tooltip）
- 强制确认或长流程（改用 modal）
- 内容需要大量滚动（改用 drawer）
常见形式
纯文本
Plain
帮助说明文字，最轻量
交互式
Interactive
内含输入框、按钮等可操作元素
富内容
Rich
带图片或结构化信息卡
实现要点
position: absolutez-indexbox-shadowtransform-origin以触发元素为锚 absolute 定位（或用 floating-ui 思路测量并翻转防溢出）。 点击外部关闭：在 document 上监听 pointerdown 判断 target 是否在浮层内；Esc 同样关闭，焦点移入浮层。 入场 scale 0.95→1 加淡入，150~200ms；尊重 prefers-reduced-motion。
平台 API
popover[popover]role="dialog"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| HTML | popover attribute |
| shadcn/ui | Popover |
| MUI | Popover |
| AntD | Popover |
横向对比
查看完整对比 →相关概念
悬停在元素上短暂出现的小型文字气泡，用来解释图标按钮、缩写或被截断的文本。 纯提示、不可交互，移开即消失；通常延迟约 300ms 出现以避免扫过时闪烁。
组件相似概念覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件替代方案从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件替代方案由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件相似概念容易混淆
Tooltip 只读、短暂、悬停触发；Popover 可交互、点击触发。
Dropdown 列表是命令项，Popover 内容任意。
Modal 遮罩整页，Popover 不遮罩、可点外部关闭。