原生 popover 不支持多层嵌套，规范限定同一时刻仅一个 popover 可显示且必须位于顶层；嵌套写法会被浏览器静默忽略，强制互斥；需改用 floating-ui、popper.js 或扁平化设计实现类似效果。
原生 popover 不支持多层嵌套
HTML 原生 popover 属性不允许多个 popover 元素互相嵌套或叠加触发，浏览器会静默忽略第二层及以后的 popover。这不是兼容性问题，而是规范明确限制：同一时刻最多一个 popover 处于显示状态，且所有 popover 都是顶层、互斥的浮层。
为什么加了两个 popover 仍只显示一个
常见错误是这样写：
<button popovertarget="a">一级</button><br><div id="a" popover="auto"><br> <button popovertarget="b">二级</button><br> <div id="b" popover="auto">不会出现</div><br></div>
结果点击“一级”后，“二级”按钮根本无法触发 b 的 popover——因为 a 显示时，b 所在 DOM 节点虽存在，但其 popover 属性被浏览器视为无效（规范要求 popover 必须处于 document top-level，不能在已显示的 popover 内部激活）。
-
popover="auto"元素一旦被showPopover()或点击触发，其他 popover 自动关闭 -
popover="manual"也不能绕过该限制：调用document.getElementById('b').showPopover()会抛出DOMException: Cannot show a popover while another is already shown - 即使把
b移到<body>下，只要a还开着，b依然无法 show
想实现“气泡里再弹气泡”，得放弃原生 popover
真需要嵌套交互（比如气泡内有个按钮再展开详情），必须切换技术方案：
立即学习“前端免费学习笔记（深入）”；
- 用
@floating-ui/react或popper.js手动管理多个浮层实例，每个浮层独立计算位置、z-index 和显隐逻辑 - 纯 CSS 方案可退回到
data-tooltip+::before/::after，靠类名控制层级（如.tooltip-active .tooltip-sub），但需 JS 切换 class - 若坚持零脚本，只能扁平化设计：把“二级内容”收进一级 popover 内部，用
<details>或 CSSmax-height+overflow折叠展开，而非新 popover
原生 popover 的定位、堆叠和生命周期都是硬编码的，没有 API 暴露给开发者干预多层行为——这点容易被 demo 误导，实际项目中一旦需要嵌套，就得承认它不是为此设计的。
