很长一段时间，前端开发者都在用各种外部库或手写数十行JavaScript来实现弹出层：监听点击、计算定位、管理焦点、处理点击外部关闭……逻辑繁琐且容易出错。现在，浏览器原生支持的Popover API把这一切打包进了HTML属性里——你只需在元素上添加popover属性，再用popovertarget和popovertargetaction关联触发按钮，一个完整的弹出交互就完成了，零JavaScript。
这篇文章将通过下拉菜单、工具提示和简单表单三个完整示例，让你彻底掌握Popover API的声明式用法，以后能少写好多脚本。
Popover API基本三要素
任何一个Popover组件都由三部分组成：
- 弹出容器：加上
popover属性的任意HTML元素，支持popover="auto"（默认）或popover="manual"。 - 触发按钮：使用
popovertarget属性指向弹出容器的id。 - 操作行为：通过
popovertargetaction指定点击后的行为 ——toggle（切换）、show（显示）或hide（隐藏）。
最简示例：
<button popovertarget="my-popover" popovertargetaction="toggle">点击我</button>
<div id="my-popover" popover>我是弹出的内容</div>只要这样写，点击按钮就会弹出方框；再点按钮或按Esc键、点击方框外部，弹出层自动消失。浏览器帮你处理了所有层级、焦点和关闭逻辑。
popover的两种模式：auto 与 manual
popover或popover="auto"（默认）：弹出层拥有“轻量级关闭”特性 —— 点击外部区域或按下Esc键都会自动关闭，很适合下拉菜单和工具提示。popover="manual"：你可以在代码里通过.showPopover()和.hidePopover()方法手动控制，但点击外部或Esc键不会自动关闭。这适合需要复杂交互逻辑的组件，比如包含重要表单的弹出层。
声明式行为主要依赖 auto，因为它已经覆盖了最常见的需求。
实战一：header里的下拉菜单
我们先用Popover API做一个在导航栏里常见的“用户头像下拉菜单”。HTML结构如下：
<header>
<nav>
<button popovertarget="user-menu" popovertargetaction="toggle">
我的账户
</button>
<div id="user-menu" popover>
<ul>
<li><a href="/profile" rel="external nofollow" >个人信息</a></li>
<li><a href="/orders" rel="external nofollow" >我的订单</a></li>
<li><a href="/logout" rel="external nofollow" >退出</a></li>
</ul>
</div>
</nav>
</header>没有JavaScript，没有定位className，按钮和菜单之间只有属性关联。弹出时，浏览器会自动将该元素提升到顶层（Top Layer），避免了z-index竞逐的噩梦。同时，点击菜单项后，因为popover="auto"的作用，菜单会在点击外部时自动收起，体验非常原生。
如果想要菜单在点击内部链接后仍然保持打开（比如用户可能点错），可以使用 popover="manual"，但那就需要JavaScript辅助。对于常规导航，auto足够了。
实战二：纯HTML工具提示
工具提示在传统实现中往往需要计算位置、防溢出，非常依赖JS。Popover虽然不自动追踪鼠标，但作为被触发的弹出层，非常适合“点击查看详情”类型的提示。至于hover触发的纯tooltip，仍然需要一点CSS（:hover 配兄弟选择器）或title属性，但Popover可以提供更丰富的内容结构。
一个简单的术语解释弹出层：
<p>
前端框架中，<button popovertarget="info-react" popovertargetaction="toggle">React</button>
是一个很流行的库。
</p>
<div id="info-react" popover>
<strong>React</strong> 是由Facebook开发的用于构建用户界面的JavaScript库。
<button popovertarget="info-react" popovertargetaction="hide">关闭</button>
</div>点击“React”按钮，旁边会弹出解释框，内部还有一个隐藏自己的按钮。这种带“关闭”按钮的模式比单纯title属性更友好，特别是在移动端。
实战三：弹出式搜索表单
许多应用在顶部导航栏放置一个搜索图标，点击后滑出搜索框。用Popover实现同样简单：
<button popovertarget="search-popover" popovertargetaction="toggle">🔍</button>
<div id="search-popover" popover>
<form role="search">
<input type="search" placeholder="搜索文章..." autofocus>
<button type="submit">搜索</button>
</form>
</div>弹出时，搜索输入框会自动获得焦点（因为我们设置了 autofocus），用户可以直接输入。由于这是 popover="auto"，按Esc键会关闭弹出层并让焦点回到触发按钮，整个交互链非常流畅。
处理弹出层的样式
虽然本文避免使用内联样式，但在实际项目中，你可以为[popover]元素编写CSS，通过:popover-open伪类定义弹出时的外观。浏览器还会自动生成一个::backdrop伪元素，为弹出层背后的区域添加遮罩。这些都可以在外部样式表中实现，而不需要任何JavaScript。
例如，你可以在全局CSS中写：
[popover] {
border: 1px solid #ccc;
border-radius: 6px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
[popover]:popover-open {
/* 由浏览器自动管理 */
}
[popover]::backdrop {
background: rgba(0,0,0,.25);
}这样一来，弹出层的视觉表现完全由CSS负责，HTML只专注结构和交互声明。
无障碍与键盘操作
Popover API从一开始就内置了无障碍支持：
- 弹出层被自动提升到顶层，屏幕阅读器能识别其内容。
- 按下 Esc 键会关闭弹出层，这也触发了标准的关闭事件。
- 焦点自动管理：关闭后焦点回到触发按钮。
- 通过
popovertargetaction="show"与hide，你甚至可以构建一个完全由按钮驱动的模态引导流程。
相比以往用手动监听键盘和焦点，Popover显著降低了开发出无障碍bug的概率。
浏览器支持与渐进增强
Popover API目前已在Chrome 114+、Edge 114+、Safari 17+、Firefox 125+（需要手动开启）上原生支持。对于尚未支持的浏览器，弹出层会作为普通文档流元素展示（或隐藏），不会损坏页面核心功能。你可以针对不支持popover的浏览器采用原有的JavaScript方案进行渐进增强，而现代浏览器享受零代码的简洁实现。
检测支持的简单方法：
if (!('popover' in HTMLElement.prototype)) {
// 加载polyfill或启用备用逻辑
}总结
Popover API将“弹出”这种UI模式标准化到了HTML层面，让开发者不必再为最基本的浮动层编写逻辑。下拉菜单、轻量提示、搜索框、选项面板……这些曾经依赖大量脚本的组件，现在用几个属性就能声明出来，并且自带焦点、关闭和无障碍行为。
下次当产品经理又给你提一个“这里加个弹出选择器”的需求时，不妨先试着只用HTML完成，然后把省下来的时间花在更有价值的交互上。你会发现，写更少的JavaScript，页面反而更稳、更快、更易维护。
