Popover：轻量浮层与提示
Popover 是紧贴触发元素显示的轻量浮层，补充一小段说明或提供少量轻量选项，例如尺码提示、术语解释、运费说明气泡。它最易与 Tooltip 混淆：Tooltip 只是对触发元素的简短描述，不能获得焦点，也不含可操作内容；要放链接、按钮或较长文字，就已是 Popover 或 Modal 的范围。
适合与不适合
适合可有可无的补充信息：图标含义、字段含义、术语解释，以及少量就近选项（排序方式、单位切换）。不适合承载关键购买条件：价格构成、运费、退货期限、库存与到货时间、安全警示，这些必须直接可见。也不适合放长文、表单或多步任务，应改用 Drawer、Modal 或独立页面。
与相邻模式的区别
| 相邻模式 | 判据 | 说明 |
|---|---|---|
| Tooltip | 能否含可操作内容 | APG 定义 Tooltip 是元素获得键盘焦点或鼠标悬停时显示相关信息的弹出层，自身不能获得焦点；含可聚焦元素的悬浮内容，APG 建议用非模态对话框 |
| Accordion / Disclosure | 是否推开页面 | Disclosure 是按钮控制一段内容显隐（aria-expanded），内容在文档流内展开；Popover 浮在内容之上，不改变布局 |
| Modal | 是否阻断背景 | MDN 明确 Popover API 创建的浮层始终非模态；需要模态时用 <dialog> |
| Drawer | 任务量 | Popover 承载一段说明或一两个选项；需多次操作时升级为 Drawer |
| Toast | 触发者 | Popover 由用户对某元素的操作触发并就近显示；Toast 由系统事件触发 |
优点与缺点
| 优点 | 缺点 |
|---|---|
| 就近解释，不打断阅读与布局 | 触摸设备没有 hover，只靠悬停就看不到 |
| 节省空间，适合小图标的补充说明 | 隐藏信息容易被忽略 |
| 原生 Popover API 提供顶层渲染与 Esc 关闭 | 定位、边缘翻转和小屏溢出仍需自行处理 |
内容与交互要求
内容要短，只解释触发元素，不引入新决策。触发元素是可见、可聚焦的控件（通常是按钮），有清晰名称，不用无文字的裸图标；每位顾客都需要读到的说明，直接放在页面上。触发方式按设备分别设计：
- 鼠标：悬停可以显示，但不能是唯一途径；
- 键盘：获得焦点时显示（Tooltip），或 Enter / Space 激活（Popover、Disclosure），Escape 关闭；
- 触摸：没有 hover，需点击触发，并可再次点击或点击外部关闭。这是依据 hover 定义得出的设计要求，WCAG 1.4.13 页面并未专门论述触摸。
响应式与无障碍
WCAG 2.2 的 1.4.13 Content on Hover or Focus（AA）要求，由悬停或焦点触发的附加内容同时满足：可关闭（不移动指针悬停或键盘焦点即可关闭；输入错误提示与不遮挡其他内容的除外）、可悬停（指针可移到附加内容上而不消失）、持久（保持可见直到触发移除、用户关闭或信息失效）。浏览器自带的 title 提示属用户代理控制的呈现，不在此列，但不应作为唯一的说明来源。
Tooltip 按 APG：容器 role="tooltip"，触发元素用 aria-describedby 指向它，Escape 关闭，焦点留在触发元素上；APG 页面标注该模式仍在讨论、尚无共识。Disclosure 按 APG：触发控件是按钮，aria-expanded 表示状态，Enter 与 Space 切换。
原生 Popover API（MDN）：popovertarget 把 <button> 变成控制按钮；auto 可通过点击外部（light dismiss）或 Esc 关闭并会关闭其他 auto popover；manual 不能点击外部关闭；hint 不关闭 auto popover，通常由 mouseover、focus 等事件触发，适合 Tooltip 类用途。建立触发关系后，浮层内控件紧随触发按钮之后进入 Tab 顺序，并隐式建立 aria-details 与 aria-expanded 关系，Esc 关闭后焦点回到触发元素。
浏览器支持只转述 MDN：两页对该特性 Baseline 时间的标注不一致（分别写到 2025 年 1 月与 2024 年 4 月），并提示部分功能支持程度不一，使用前查 MDN 兼容表。Horizon 布局正文记录了该主题在浏览器不支持原生 popover 时加载 polyfill 的做法，可作兜底参考。
浮层在 320 CSS 像素宽度与文本放大后不得被视口裁切；靠近边缘时翻转或收缩，不留不可达的部分。
状态与退化
- 零项：没有可说明内容时不渲染触发按钮，不留空气泡。
- 一项与多项：同一时刻只保持一个
auto浮层；多个提示并存时避免互相遮挡。 - 加载与错误：浮层数据来自请求时，显示加载状态，失败给出简短提示与重试。
- 无 JavaScript：说明以文本或页面链接呈现；Disclosure 可退化为
<details>；关键信息不依赖浮层。 - 减少动态：取消淡入与位移，直接显示。
常承载的内容与模块
尺码提示（配合尺码指南页面，浮层只放一句提示与页面链接）、运费与配送信息的补充说明、商品规格的术语解释；权威来源仍在各自类型，总览见功能模块。价格、运费总额与退货条件等购买条件不属于 Popover 内容。
发布前检查
- 去掉这个浮层后，顾客还能完成购买并理解关键条件吗？
- 键盘与触摸能否打开和关闭？Escape 能否关闭？
- 悬停触发的内容能否被指针移入、能否不移动焦点即关闭、是否持久？
- 浮层内是否出现了需要焦点的控件？若有，是否已升级为 Popover 或对话框？
- 小屏、放大与靠近视口边缘时是否被裁切？无 JavaScript 时说明是否可读？
固定版本主题实现
- Dawn 预测搜索：Dawn 全仓库搜索未找到
popovertarget、showPopover等原生 Popover API 用法，搜索建议面板不是 Popover API 实现。 - Horizon 预测搜索：Horizon 预测搜索使用
<dialog>与showModal()。
固定基线为 Dawn v15.3.0 与 Horizon 4.2.0；结论限于这两个提交，均为静态源码分析，未运行验证。
待继续完善
- 在真实浏览器与读屏软件中对比
aria-details与aria-describedby的朗读差异。 - 查 MDN 兼容表，补充
hint类型的当前支持状态。