popovertarget属性必须与目标元素的popover属性配对使用，单独设置无效；目标元素需显式声明popover（无值）或popover="auto"，且id严格匹配；popover="manual"时popovertarget失效，须改用js调用showpopover()/hidepopover()。
popovertarget 属性必须配合 popover 全局属性才能生效
单独写 popovertarget="id" 不会触发任何行为，浏览器直接忽略。目标元素（比如一个 <div>）必须显式声明 <code>popover="auto" 或 popover="manual"，否则点击按钮毫无反应。
常见错误是只给按钮加 popovertarget，忘了给气泡容器设 popover：
<button popovertarget="my-popover">显示</button> <div id="my-popover">内容</div> <!-- ❌ 缺少 popover 属性 -->
正确写法：
<button popovertarget="my-popover">显示</button> <button popovertarget="my-popover">也显示</button> <div id="my-popover" popover="auto">内容</div>
多个按钮控制同一个 popover 时，popovertargetaction 决定行为
默认所有按钮都是 popovertargetaction="toggle"，即点一下显示、再点一下隐藏。但你可能需要“只显示不自动隐藏”或“强制关闭”，这时得显式设置：
-
popovertargetaction="show"：每次点击都尝试打开（已打开则无效果） -
popovertargetaction="hide"：每次点击都尝试关闭（已关闭则无效果） - 不写该属性或写
toggle：切换状态（最常用）
例如，一个“打开”按钮 + 一个独立“关闭”按钮：
<button popovertarget="my-popover" popovertargetaction="show">打开</button> <button popovertarget="my-popover" popovertargetaction="hide">关闭</button> <div id="my-popover" popover="auto">内容</div>
使用 popover="manual" 时，必须手动调用 showPopover() 和 hidePopover()
一旦设为 manual，popovertarget 就完全失效——浏览器不再响应按钮的 target 行为。此时只能用 JS 控制：
<button id="btn-show">显示</button> <button id="btn-hide">隐藏</button> <div id="my-popover" popover="manual">内容</div>
对应 JS：
const popover = document.getElementById('my-popover');
document.getElementById('btn-show').onclick = () => popover.showPopover();
document.getElementById('btn-hide').onclick = () => popover.hidePopover();
注意：showPopover() 会抛出异常（如 popover 已显示），建议加 try/catch；hidePopover() 对已隐藏的元素是安全的。
当前兼容性限制和容易忽略的细节
popover 是较新的 API，仅 Chromium 114+（Chrome/Edge 114+、Opera 100+）稳定支持，Firefox 和 Safari 尚未实现。生产环境需降级处理。
几个关键细节常被忽略：
- 目标元素
id必须与popovertarget值**完全匹配**（区分大小写、不能有空格） -
popover="auto"元素默认display: none，首次 show 后才渲染，不要提前写style="display: block" - 气泡不会自动定位到按钮下方——它默认出现在视口中心，需用 CSS 的
position: absolute+anchor配合anchor-name微调（那是另一套机制） - 键盘焦点流不自动跟随：按 Tab 进入 popover 需手动管理
inert和tabindex
原生 popover 看似简单，但多按钮协同时，popover 属性值、popovertargetaction 类型、以及浏览器是否真正支持，三者缺一不可。
