气泡卡片Popover
你可能会说
点一下头像，旁边浮出一张小卡片显示资料。
气泡卡片是贴近触发元素展开、可承载补充信息和少量操作的浮层组件点击成员头像可展开其资料、链接和少量操作。只有一句简短解释时使用文字提示 Tooltip更合适；触屏设备不能只依赖悬停。
先知道
你可以这样告诉 AI Agent
请让成员头像通过点击和键盘聚焦打开气泡卡片，卡片贴近触发点，包含部门、邮箱和两个可操作入口。支持触屏、Escape 关闭和点击外部关闭，并确认鼠标能移入卡片操作。
什么时候用
- 点头像看人：用户信息卡，带主页入口ans-studio查看主页 →
- 轻量筛选面板：几个勾选项就地展开筛选状态进行中已完成
- 说明 + 操作链接：快捷键、帮助入口快捷键⌘S 保存 · ⌘P 发布查看全部 →
- 通知 / 设置小面板：比 Tooltip 丰富，比弹窗轻通知设置 管理偏好 →
什么时候不用
- 只有一句简短说明：使用 文字提示 Tooltip设置
- 帮助中心查看全部 24 篇 →
- 需要用户确认操作：使用 气泡确认框 Popconfirm⚠ 确认删除这条记录？删除取消确定
- 全局性公告：使用 警告提示 Alert 固定在页面中📢 本周六 02:00-04:00 系统维护，期间暂不可用
组成结构 · Anatomy
通知设置
管理偏好 →
🔔
就地展开的容器，箭头指向触发源
可选，说清这张卡片是什么
列表、说明、链接，比 Tooltip 自由
通过点击或悬停展开，例如头像
常见变体 · Variants
用户卡片User Card
林
ans-studio
产品经理
点击头像或姓名查看身份信息
筛选面板Filter
筛选状态
☑ 进行中
☐ 已完成
几个筛选项就地展开，不占页面位置
说明带链接With Link
快捷键
⌘S 保存 · ⌘P 发布
查看全部 →解释一句话不够，还要给个入口
典型使用场景
头像用户卡片
项目协作台
🔔
林小hu
产品经理 · 深圳
表头筛选
名称负责人状态 ▾
筛选状态
☑ 进行中
☐ 已完成
☐ 已归档
快捷键说明
✎⬇⌘
快捷键
⌘S 保存 · ⌘P 发布
查看全部 →
通知设置面板
消息中心
🔔
通知设置
新评论提醒
系统公告
延伸阅读 · 权威出处
快速练习