气泡卡片
Popover
初级通用气泡卡片（Popover）是贴着某个触发元素出现的小型浮层，可以放简短说明、选项或操作。它让你在当前页面就能查看或处理与该元素有关的内容，例如点击用户头像后查看账号操作。
你可能会说：「我想点用户头像后，在旁边弹出一个小面板放账号操作，不用跳到新页面。」
动手看看头像旁的账号卡片
展开账号卡片
出现位置
悬停或用 Tab 聚焦头像，看看触发入口的反馈；用「展开账号卡片」模拟点击头像和收起卡片，也可以切换它出现的位置。
卡片贴着头像出现，盖住一部分日程，但没有遮罩锁住整个页面。账号设置和退出登录都与这个头像有关，适合就近放在这里。
要点气泡卡片是怎么工作的？
- 1
围绕触发元素展示内容
你点击头像、更多按钮或表格中的某个单元格后，卡片会出现在它附近。这样用户能看出内容属于哪里，而不是把浮层误认成整页发出的消息。
- 2
内容和交互决定打开方式
如果卡片里有按钮、链接或输入项，点击打开通常比仅靠悬停稳妥，因为用户需要时间把指针移进去，也可能用键盘或触屏操作。打开后还要考虑如何关闭。
- 3
位置会随可用空间调整
你可能希望卡片出现在按钮下方，但按钮靠近屏幕底部时，下方就放不下了。这时让它改到上方或调整位置，才能避免内容被视口边缘裁掉。
容易混淆的地方
气泡卡片和文字提示都依附于某个元素，但文字提示通常只补充一句简短信息；气泡卡片可以容纳更丰富的内容和可点击操作。它也不同于模态弹窗：模态弹窗会要求用户先处理当前任务，气泡卡片则适合在原页面上就近查看或操作。
什么时候用
适合用
- 做后台表格时，点击某行的更多按钮，就近展示只作用于这一行的几个操作。
- 做 AI 工具时，点击模型名称，在旁边展示当前模型的简要信息和切换入口。
- 做网站账号区时，点击头像，展开个人资料入口与退出登录等操作。
不适合用
- 要让用户填写一份包含多个字段的资料时，卡片空间太局促，改用独立页面或抽屉。
- 要在删除数据前让用户明确确认后果时，改用气泡确认框或模态弹窗，而不是普通气泡卡片。
- 只想告诉用户保存成功时，不需要把提示绑在按钮旁边，改用轻提示更合适。
练一练选一个答案，看看解释
你在做后台用户列表，每行都有一个更多按钮。点击后要显示“查看详情”和“停用账号”，用户仍需看着当前行操作。你会选哪种呈现方式？
让 AI 帮你做复制给 AI Agent 直接用
请在用户列表每行的更多按钮上实现气泡卡片，点击后贴近该按钮显示当前行的“查看详情”和“停用账号”。点击外部或按 Escape 可关闭；卡片靠近视口边缘时调整位置，并让键盘用户能打开和使用其中的操作。