写过前端的人都踩过这个坑——每次写浮层都要写一堆 JS，今天浏览器把它们彻底原生化了

写过前端的人都踩过这个坑——每次写个 tooltip、下拉菜单或者设置面板，都要写一堆 JS：监听外部点击、捕获 Escape 键、算 z-index、还要小心不要让弹出层被父元素的 overflow:hidden 裁掉。

现在浏览器把这些全部原生化了。Popover API 用两个 HTML 属性替代所有这些 JS 代码，auto/hint/manual 三种模式覆盖从 tooltip 到持久化面板的所有场景。

先说问题：传统浮层方案三个躲不开的坑

写浮层组件的时候，有三个问题是任何 JS 库都绕不开的：

z-index 战争。弹出一个菜单，结果被父容器或者某个第三方小组件的 z-index 压住了，这种 bug 查起来非常费劲，因为涉及多个层叠上下文。

点击外部关闭。你写了一个下拉菜单，用户点击页面其他任何地方，菜单应该消失。这个”点击外部”的检测听起来简单，但涉及 document 层级的事件委托，处理不好就会影响性能或者漏掉某些边界情况。

Escape 键关闭。无障碍规范要求键盘用户能用 Esc 关闭浮层。这个功能本身不复杂，但每个组件都重复写一遍就是浪费。

这三个问题，每解决一次都意味着几十行 JS。而这些问题，本来就是浏览器应该管的。

最小化上手：两个属性就够了

Popover API 的用法极度简洁。你只需要两个东西：一个触发按钮 + 一个浮层元素。

按钮上加 popovertarget="浮层ID"，浮层元素上加 popover 属性——不需要写任何 JS：

<button popovertarget="my-tooltip">悬停看提示</button>
<div popover id="my-tooltip">这里是提示文本</div>

点击按钮，浮层自动打开；再次点击，或者点击外部，或者按 Esc，浮层自动关闭。这些行为全部是浏览器内置的，零 JS 实现。

三种模式：auto / hint / manual，按场景选

popover 属性的值决定浮层的关闭行为，选错模式会直接影响用户体验。

auto（默认）：轻触关闭型。点击浮层外部、按 Esc、或者打开另一个 auto 浮层，都会自动关闭当前浮层。这个模式适合下拉菜单、工具提示等临时性 UI，一次只能有一个 auto 浮层存在。打开新菜单时，前一个菜单自动关闭。

manual：不自动关闭型。浮层会一直保持打开，直到你显式用按钮或 JS 关闭它。多个 manual 浮层可以同时存在。这个模式适合 toast 通知、持久化设置面板、需要用户明确确认的浮层。

hint（实验性）：专为 tooltip 场景设计。它不会关闭页面上已有的 auto 浮层——当你鼠标悬停显示一个 tooltip 时，底下已经打开的下拉菜单不会被它关掉。Chrome 133+/Edge 133+/Firefox 149+ 支持，Safari 暂不支持，还不能作为生产主力。

选型建议：下拉菜单用 auto，toast 用 manual，tooltip 视项目 Safari 兼容性要求决定是否用 hint。

浏览器内置的四大能力

用 Popover API 写浮层，浏览器会帮你处理四件以前必须手写的事：

Top Layer 渲染。浮层会被提升到浏览器专属的 Top Layer，不受普通 z-index 层叠上下文约束，也不会被父元素的 overflow:hidden 裁剪。以前为了避免被裁剪，需要把浮层 render 到 body 末尾；现在不需要了。

Light Dismiss。点击浮层外部、按 Esc 键、切换到其他标签——这些操作都会自动关闭浮层。这些行为由浏览器统一实现，比手写事件监听更可靠、性能更好。

焦点管理。浮层打开时，焦点自动移入浮层内部。浮层关闭后，焦点自动返回到触发按钮。整个过程浏览器自动处理，不需要你写任何 focus 相关的 JS。

无障碍绑定。触发按钮的 aria-expanded 状态由浏览器自动维护；屏幕阅读器原生识别 popover 元素的角色。不需要手动写复杂的 ARIA 属性同步代码。

这四个能力加在一起，基本上覆盖了以前 tooltip 库 80% 的功能。

样式控制：:popover-open 和 ::backdrop

浮层的样式写法和其他元素一样，但有一个专属的打开状态选择器：

[popover] {
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* 打开状态 */
[popover]:popover-open {
  display: block;
}

/* 遮罩层（可选） */
[popover]::backdrop {
  background: rgba(0,0,0,0.3);
}

:popover-open 替代了以前通过 class 切换状态的写法。::backdrop 伪元素可以给浮层底部加一层遮罩，常见于需要聚焦用户注意力的场景。

动画：@starting-style 让离散属性也能过渡

传统 CSS 里，display:none 和 display:block 之间的过渡是无法用 transition 实现的。Popover API 配合 CSS 新特性可以做到：

[popover] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s,
    display 0.2s allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style [popover]:popover-open {
  opacity: 0;
  transform: scale(0.95);
}

allow-discrete 允许 transition 作用于 display 属性，@starting-style 定义动画起始帧。这样浮层的出现和消失都有了平滑过渡。

与 CSS Anchor Positioning 组合：浮层自动贴边

基础 Popover API 的浮层默认出现在屏幕中央。如果想让浮层紧贴触发按钮，需要配合 CSS Anchor Positioning：

[popover] {
  position-anchor: --trigger-btn;
  position-area: top;
  position-try-fallbacks: flip-block;
}

position-anchor 把浮层绑定到某个按钮，position-area: top 让浮层出现在按钮上方，position-try-fallbacks: flip-block 在上方空间不够时自动翻转到按钮下方。整个定位逻辑由浏览器计算，不需要 JS 手动算坐标。

浏览器兼容性

Popover API 在 2025 年 1 月进入 Baseline Widely Available，主流浏览器全部支持：

• Chrome 114+ / Edge 114+ ✅
• Firefox 125+ ✅
• Safari 17+ / iOS Safari 18.3+ ✅（18.3 修复了 light dismiss bug）
• 全球覆盖约 95%

Safari 以前有个历史 bug：iOS Safari 18.3 之前点击外部无法关闭 popover。这也是为什么该 API 直到 2025 年初才被认定为 Baseline 的原因之一。

结论：现在可以删掉 tooltip 库了

如果你项目里的浮层场景只是下拉菜单、tooltip、toast 或者小型设置面板，Popover API 已经足够用了。浏览器替你处理 z-index、点击外部关闭、Escape 键、焦点管理、无障碍同步——这些以前是 JS 库的职责，现在全部由平台接管。

唯一需要保留 JS 的场景是：需要自定义定位逻辑（Anchor Positioning 满足不了）、或者需要复杂的多步交互流程。除此之外，删掉 tooltip 库，给项目减个几十 KB，可以开始了。

下一步

如果你想试试，现在就可以开始迁移：

1. 找项目里用 JS 控制显示/隐藏的 tooltip 组件，评估 Popover API 是否覆盖该场景
2. 用 @supports (property: popover) 做渐进增强，兼容还不支持的浏览器
3. 如果浮层需要定位，用 CSS Anchor Positioning 替代 Floating UI / Popper.js