用途
Popover 用于在主内容之上叠加显示聚焦的内容或操作。它向用户提供额外的信息或操作，同时保持周围页面可见。与阻断页面交互的模态框不同，Popover 在传递上下文帮助或快捷方式时，让主界面保持可见和可交互。
主要能力
Popover 适合展示针对特定上下文的信息或快捷操作，这些内容补充主视图但不需要用户完全聚焦。常见场景包括：
- 上下文帮助：需要关于数据字段的额外细节
- 快捷操作或快捷方式：如编辑选项或额外按钮
- 紧凑工具栏或菜单：按需出现的筛选器或设置
- 预览或补充信息：在悬停/聚焦时显示图片或文本预览
使用方式
实现工作流建议：
- 在复制示例前，确认该模式与问题和约束相匹配。
- 从 references/pattern.md 中的结构和示例开始，然后选择最小的可行变体。
- 在添加视觉润色之前，先应用无障碍、性能和交互防护措施。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍防护措施：
必需的 ARIA 属性：
- 触发元素上的 aria-haspopup="true"
- 触发元素上的 aria-expanded，用于反映打开/关闭状态
- Popover 容器上的 role="dialog"（或作为菜单使用时为 role="menu"）
- 确保焦点管理，使键盘用户获得上下文
键盘交互模式：资料提供了标准键盘交互表，但具体按键与动作的对应内容暂未提供。
适用场景
- 需要关于数据字段额外细节的上下文帮助
- 编辑选项或额外按钮等快捷操作或快捷方式
- 按需出现的筛选器或设置等紧凑工具栏或菜单
- 在悬停/聚焦时显示图片或文本预览等预览或补充信息
限制
应避免在以下情况使用 Popover：
- 关键信息必须持续可见
- 大型表单或复杂交互更适合使用模态框
- 上下文需要全页接管以保证清晰度
相关模式
- https://uxpatterns.dev/patterns/content-management/modal
- https://uxpatterns.dev/patterns/content-management/tooltip
- https://uxpatterns.dev/patterns/forms/selection-input
完整实现细节、示例和测试说明，请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/content-management/popover