HTML Popover API 完整教学：不用 JavaScript 也能做弹跳框

Popover API 是什么？跟 dialog 差在哪？

以前要做弹跳框，不管是 tooltip、dropdown 还是通知，都要：

• 手动切换 display: none / block
• 监听点击外部关闭
• 自己叠 z-index 让它显示在最上层
• 加 aria 属性处理无障碍

Popover API 把这些全部变成浏览器原生行为，一个属性搞定。

跟 <dialog> 的差异很明确：

	<dialog>	popover
用途	Modal 强制互动	弹跳框非阻断
背景	锁定，无法操作	可继续操作
使用场景	确认框、表单、警告	tooltip、dropdown、通知

支持率：Chrome 114+、Safari 17+、Firefox 125+，目前全球约 93%，可以放心用在正式项目。

基本语法：一行 HTML 就够

最简单的写法，完全不需要 JavaScript：

<button popovertarget="my-tip">显示说明</button>

<div id="my-tip" popover>
  这是弹跳框内容
</div>

• popovertarget：指向目标的 id，点击时触发开关
• popover：标记这个元素是弹跳框，默认等同 popover="auto"

浏览器自动处理：

• 点击外部关闭
• Esc 键关闭
• 显示在最上层（Top Layer，不受 z-index 影响）
• 无障碍属性（aria-expanded、aria-controls）

auto vs manual：两种行为模式

popover 有两种模式：

<!-- auto：点外部自动关闭（默认） -->
<div id="tip-auto" popover>内容</div>

<!-- manual：只能用 JS 或按钮控制 -->
<div id="tip-manual" popover="manual">内容</div>

auto 模式的特性：

• 点击外部自动关闭
• 同时只能开一个（开新的会关掉旧的）
• Esc 键可关闭

manual 模式的特性：

• 点击外部不关闭
• 可以同时开多个
• 需要自己控制关闭

大部分场景用 auto 就好，manual 适合通知 toast 或需要堆叠的情况。

用 JavaScript 控制 Popover

不用触发按钮，也可以用 JavaScript 控制：

const popover = document.getElementById('my-popover');

popover.showPopover();   // 显示
popover.hidePopover();   // 隐藏
popover.togglePopover(); // 切换

监听开关事件：

popover.addEventListener('toggle', (e) => {
  if (e.newState === 'open') {
    console.log('popover 开启了');
  } else {
    console.log('popover 关闭了');
  }
});

这在做通知系统时特别好用——manual 模式加上 toggle 事件，可以做出自动消失的 toast 通知。

搭配 CSS 做进场动画

Popover 默认出现没有动画，但搭配 :popover-open 和 @starting-style 可以做纯 CSS 动画：

[popover] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease,
              display 0.25s allow-discrete,
              overlay 0.25s allow-discrete;
}

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

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(8px);
  }
}

display 和 overlay 的 allow-discrete 是关键——让 popover 在消失时也有动画，而不是瞬间消失。

::backdrop 与样式化

跟 <dialog> 一样，popover="auto" 也有 ::backdrop，但默认是透明的。你可以加上半透明遮罩：

[popover]::backdrop {
  background: rgba(0, 0, 0, 0.2);
}

另外，可以用 :popover-open 伪类针对开启状态做样式：

/* 触发按钮在 popover 开启时的样式 */
button:has(+ [popover]:popover-open) {
  background: #e0e7ff;
}

常见问题

Q：Popover 和 dialog 什么时候用哪个？

• 需要强制用户互动（确认、填表单）→ <dialog showModal()>
• 不阻断背景操作的弹跳框（提示、菜单、通知）→ popover

Q：可以用 CSS 控制 Popover 的位置吗？

默认 popover 出现在屏幕中央。要精确定位，可以搭配 CSS Anchor Positioning（anchor-name / position-anchor），但这个功能目前只有 Chrome 支持，通用方案还是用 JavaScript 计算位置。

Q：旧浏览器怎么办？

if (!HTMLElement.prototype.showPopover) {
  // 用 dialog 或自定义逻辑替代
}

目前 93% 支持率，视项目需求决定是否需要 polyfill。

总结

Popover API 填补了一个长久以来的空缺——介于完全自定义和 dialog 强制 Modal 之间的原生弹跳框。

适合用的场景：

• Tooltip / 说明提示：hover 或点击显示额外信息
• Dropdown 菜单：账号、设置、筛选选项
• Toast 通知：操作成功、错误提示
• 浮动工具面板：颜色选择器、格式工具栏

不适合用的场景：

• 需要用户必须回应的确认框 → 用 <dialog>
• 复杂表单弹窗 → 用 <dialog>

对新项目来说，Popover API 应该是做弹跳框的默认选择，不再需要依赖 Bootstrap dropdown 或自己从零写了。