跳到主要内容
Termlib

UI 组件 · 反馈

气泡卡片

Popover

也叫：弹出卡片、气泡框、Popconfirm、浮动卡片

点击或悬停某个元素后，在它旁边弹出的小卡片，可以放标题、几行说明甚至按钮。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

点击用户头像时，在头像正下方弹出一个宽 280px 的气泡卡片，带指向头像的小箭头，里面显示头像、昵称、简介和「发消息」按钮；点击卡片外部或按 Esc 关闭，靠近屏幕边缘时自动换到另一侧弹出。

发给

01判断

你的内容是这样吗？

对照两列，确认气泡卡片是不是你要找的。

符合这些情况，用气泡卡片

  • 悬停或点击某个对象时，需要就地展示几行补充信息或一张资料卡
  • 删除、撤回这类单个操作前，需要在按钮旁做一次轻量确认
  • 需要在按钮旁放少量设置项或筛选选项，改完即收起

是这些情况，换成别的

  • 只需一句纯文字解释图标或按钮含义时

    改用文字提示

  • 内容包含长表单或多步操作，需要用户专注处理时

  • 必须让用户做出决定才能继续后续流程时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    用悬停触发气泡卡片，里面却放了需要点击的按钮，鼠标一移过去卡片就消失了

  2. 02

    卡片里塞长表单或长列表，超出屏幕后还得在卡片内部滚动

  3. 03

    忘了设置层级，卡片被表格固定列或顶部导航挡住

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由触发元素和浮动卡片组成，卡片带指向触发元素的小箭头，内部可有标题、内容区和操作按钮。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1紧挨着某个按钮或头像的小白卡片，带投影
  2. 2卡片一侧有指向触发元素的小三角
  3. 3背后没有遮罩，页面其余部分正常可见

04解释

详细解释

气泡卡片贴着触发它的元素弹出，带一个小三角箭头指向来源，不遮挡整个页面，也没有遮罩。点击卡片外的地方或再次点击触发元素，它就会收起。常见用途有：头像上弹出用户资料卡、「删除」按钮旁弹出「确定删除吗」的小确认框（Ant Design 里叫 Popconfirm）、表头里弹出筛选选项。

它和 文字提示（Tooltip）的区别是：文字提示只放一句纯文字，悬停出现、移开就消失；气泡卡片可以放标题、图片和按钮，用户能把鼠标移进去操作。和 对话框 的区别是：对话框居中弹出、盖住整个页面、必须处理完才能继续；气泡卡片只占一小块，是轻量的补充信息。

开发者信息
术语 ID
component-popover
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-popover
  • .el-popover
  • [class*="MuiPopover-paper"]
  • .arco-popover-content
  • .n-popover:not(.n-tooltip)
  • [data-slot="popover-content"]
  • .popover
  • [popover]:not([role="tooltip"])
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • popover
  • popup
  • hover-card
  • hovercard
  • popup-card
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Popover
  • HoverCard
  • Popup
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30