点一下出现，再点一下或点外面关掉。菜单、说明气泡、轻量提示，很多时候要的就这一下，可项目里常常为此拉进一整套组件库，主题、样式变量和用不到的浮层组件一起进来。浏览器标准里的 Popover API 提供的是把一块内容显示在页面其他部分之上的机制，可用 HTML 属性控制，也可用 JavaScript。这套 API 适合做这一类非模态浮层，但并不等于把组件库整包换掉。
属性怎么把层亮起来
MDN 把常见「盖在内容上」的东西统称为 popover，并强调用这套 API 做出来的层始终是非模态的：开着时，页面其余部分仍可交互。若需要挡住后面、强制先做选择，文档把这条路指向 <dialog>。两者可以叠：dialog 加上 popover 属性是合法的，用来把弹出控制跟对话框语义结合起来，但这已经超出「只要一个气泡」的起点。
最简的 HTML 写法在文档里只有两行：按钮用 popovertarget 指向目标的 id，被控制的元素带上 popover 属性。浏览器会处理显示和隐藏，包括把该元素放到顶层。支持该 API 的环境里，这种开关可以不写脚本，把基本行为先交给浏览器，不够用再补 JavaScript，而不是一上来就把显示逻辑全部交给组件库的运行时。
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
popover 的值可以是 auto、hint 或 manual，用来表示不同的弹出状态。入门时用属性的默认行为通常就够，三种状态的具体差别以该页为准。按钮上还可以写 popovertargetaction，在 hide、show、toggle 里选一个动作。
JavaScript 一侧，元素上有 showPopover()、hidePopover() 和 togglePopover()。文档对前两个方法的说明很具体：显示时把元素加进顶层，隐藏时将元素移出顶层，并按 display: none 处理。需要在显示前后改内容时，可以听 beforetoggle 和 toggle。样式上，:popover-open 匹配正在显示的元素，::backdrop 铺在它后面，想给背后加一层淡化时可以用。这些都是渐进增强的挂钩，不是必须一次写全。
MDN 把典型用途写成操作菜单、自定义 toast、表单建议、内容选择器或教学提示，共同点是「盖一层，但不必锁死整页」。文档还提到 interest invokers，能在悬停或聚焦时显示，不必为此写脚本。支持情况和细节以该页及链出的指南为准，这里不把悬停交互写成默认路径。复杂的日期选择、带长列表的下拉，仍然可能要靠组件库补齐数据和无障碍，范围到显示层就停，不要理解成整包替换。
不支持时怎么降级
MDN 标明这是 Baseline 2025 的能力，2025 年 1 月起在最新设备和浏览器版本中可用，较旧的环境可能没有，部分子能力的支持也不整齐。文档写到 HTMLElement.popover 可以用来做特性检测。
不支持时，浏览器不会按标准把该元素当成浮层来隐藏和抬到顶层，popovertarget 也不会自动接线。比较稳的降级是先检测，再决定要不要启用这套属性。识别不到就把内容留在页面流里当常驻块，或者用很薄的显示/隐藏兜底，而不是假设所有用户都有顶层浮层。菜单里的键盘操作、焦点循环、选项数据，组件库仍然可能比原生属性做得完整。这套 API 解决的是显示层，不是把整套交互库换掉。
现在缺的是一个能开关的气泡，还是必须带焦点管理和选项列表的完整菜单？