气泡卡片Popover
提示与状态反馈在触发位置附近展开一小块内容
先知道
气泡卡片可以放标题、列表、链接和少量操作，适合补充当前对象的信息。只有简短说明时用文字提示 Tooltip更轻；触屏设备上要提供明确的点击触发。
林
查看主页 →oil-oil
产品经理 · 深圳
什么时候用
- 点头像看人：用户信息卡，带主页入口oil-oil查看主页 →
- 轻量筛选面板：几个勾选项就地展开筛选状态进行中已完成
- 说明 + 操作链接：快捷键、帮助入口快捷键⌘S 保存 · ⌘P 发布查看全部 →
- 通知 / 设置小面板：比 Tooltip 丰富，比弹窗轻通知设置 管理偏好 →
什么时候不用
- 只有一句话 → 用 文字提示 Tooltip 就够了设置
- 帮助中心查看全部 24 篇 →
- 需要用户确认动作 → 用 气泡确认框 Popconfirm⚠ 确认删除这条记录？删除取消确定
- 全局性公告 → 用 警告提示 Alert 挂在页面上📢 本周六 02:00-04:00 系统维护，期间暂不可用
组成结构 · Anatomy
通知设置
管理偏好 →
🔔
1气泡卡片Popover就地展开的容器，箭头指向触发源
2标题Title可选，说清这张卡片是什么
3内容区Content列表、说明、链接，比 Tooltip 自由
4触发元素Trigger点击或悬停展开，点头像最典型
常见变体 · Variants
用户卡片User Card
林
oil-oil
产品经理
点头像或名字，看看这人是谁
筛选面板Filter
筛选状态
☑ 进行中
☐ 已完成
几个筛选项就地展开，不占页面位置
说明带链接With Link
快捷键
⌘S 保存 · ⌘P 发布
查看全部 →解释一句话不够，还要给个入口
典型使用场景
头像用户卡片
项目协作台
🔔
林小hu
产品经理 · 深圳
表头筛选
名称负责人状态 ▾
筛选状态
☑ 进行中
☐ 已完成
☐ 已归档
快捷键说明
✎⬇⌘
快捷键
⌘S 保存 · ⌘P 发布
查看全部 →
通知设置面板
消息中心
🔔
通知设置
新评论提醒
系统公告