Popover
浮出层
WebDesktop上手难度: 中等
从某个元素旁边「冒」出来的小面板，贴着触发它的那个东西。
Live Demo
真的可以点你刚才看到的这个：点日历图标旁边弹出的月份选择器、点「更多」后浮出的小菜单、点颜色方块后浮出的调色板——都贴着自己的触发器。
它到底是什么
Popover 的特征是「依附性」：它总是从触发元素附近长出来，指向它来自哪里。这让它和 Modal（屏幕中央）、Bottom Sheet（底部）在视觉上就能区分开。
气泡popover浮层浮出面板popover panel
Anatomy · 它由什么组成
Trigger触发元素
按下时加 active 背景
Surface浮层本体
白底 + 阴影提升悬浮感
Arrow小箭头
指向触发器，可选
Content内容
菜单项 / 表单 / 预览
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 内容需要和某个元素建立视觉关联 | 用 |
| 内容较轻（菜单、选择器、小表单） | 用 |
| 需要保留底层页面可交互 | 用 |
| 需要阻断用户完成当前操作 | 不用 |
| 内容很长、需要滚动很久 | 不用 |
Popover 放长列表是常见错误——用户滚到底会失去「它从哪来」的线索。
移动端 Popover 容易因为空间不足而飞出屏幕边缘，需要谨慎处理定位。
Similar Patterns
别搞混一句话区分：从某个元素旁边「冒」出来的小面板，贴着触发它的那个东西。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
点击「格式」按钮后，在按钮下方弹出一个 Popover，显示四种排版格式供选择，带小箭头指向触发按钮，Esc 和点击外部关闭。
不要只对 AI 说
Bad → Better不要这样对 AI 说
在这旁边弹个东西出来。
改成这样说
在触发按钮下方弹 Popover（role=menu），带小箭头指向触发器，用 Floating UI 定位并在空间不足时自动翻转到上方，Esc / 点外部关闭，焦点归还触发器。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。