COMPONENT 52 · Overlays & Disclosure
弹出层
Popover
也叫Pop-overCallout气泡浮层NSPopover
锚定触发元素，显示较丰富的临时内容或少量控件。
Displays temporary, moderately rich content anchored to a trigger.
ANATOMY & USAGE
结构与使用建议
组成部分
- 触发器
- 锚点定位
- 弹出内容
适合使用
- 补充信息或小任务与某个具体元素直接相关时。
不建议使用
- 内容只是短文字提示或任务需要完整页面时。
键盘与无障碍
- 触发器同步展开状态；浮层可键盘访问，Escape 与外部关闭后恢复合理焦点。
DESCRIBE IT TO AI
这样告诉编程助手
实现弹出层（Popover）：锚定触发元素，显示较丰富的临时内容或少量控件。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo">
<button type="button" popovertarget="filters">筛选</button>
<div id="filters" popover>
<label>
<input type="checkbox"> 仅显示可用项</label>
</div>
</div>