气泡卡片Popover

你可能会说

点一下头像，旁边浮出一张小卡片显示资料。

气泡卡片是贴近触发元素展开、可承载补充信息和少量操作的浮层组件点击成员头像可展开其资料、链接和少量操作。只有一句简短解释时使用文字提示 Tooltip更合适；触屏设备不能只依赖悬停。
先知道
按钮 Button
林
oil-oil
产品经理 · 深圳
查看主页 →
林

什么时候用

  • 点头像看人：用户信息卡，带主页入口
    oil-oil
    查看主页 →    林
  • 轻量筛选面板：几个勾选项就地展开
    筛选状态进行中已完成▼
  • 说明 + 操作链接：快捷键、帮助入口
    快捷键⌘S 保存 · ⌘P 发布查看全部 →⌘
  • 通知 / 设置小面板：比 Tooltip 丰富，比弹窗轻
    通知设置 管理偏好 →🔔

什么时候不用

组成结构 · Anatomy
通知设置
管理偏好 →
🔔
就地展开的容器，箭头指向触发源
可选，说清这张卡片是什么
列表、说明、链接，比 Tooltip 自由
通过点击或悬停展开，例如头像
常见变体 · Variants
用户卡片User Card
林
oil-oil
产品经理
点击头像或姓名查看身份信息
筛选面板Filter
筛选状态
☑ 进行中
☐ 已完成
几个筛选项就地展开，不占页面位置
说明带链接With Link
快捷键
⌘S 保存 · ⌘P 发布
查看全部 →
解释一句话不够，还要给个入口
典型使用场景
头像用户卡片
项目协作台 🔔
林小hu
产品经理 · 深圳
查看主页 →
表头筛选
名称负责人状态 ▾
筛选状态
☑ 进行中 ☐ 已完成 ☐ 已归档
快捷键说明
✎⬇⌘
快捷键
⌘S 保存 · ⌘P 发布
查看全部 →
通知设置面板
消息中心 🔔
通知设置
新评论提醒
系统公告
延伸阅读 · 权威出处
Popover APIMDN ↗