HTML popover 无“加了就弹”属性，实际是两套不兼容机制：纯HTML属性联动（popovertarget+popover布尔值）与JS调用（showPopover+popover="manual"），需明确选型；控制粒度粗用前者，需精细控制用后者；popover="auto"已弃用；Safari仅支持popovertarget且要求同步渲染；Firefox全不支持；跨浏览器稳定方案仍是。
HTML 中没有 popover 属性能“加了就弹”，所谓“新标准”实际是两套不兼容的机制：一套靠纯 HTML 属性联动（popovertarget + popover 布尔属性），另一套靠 JS 方法调用（showPopover() + popover="manual"）。混用必出问题，必须先选清楚路线。
怎么判断该用 popovertarget 还是 showPopover()
看你的控制粒度需求：
- 只需要点击开关、不关心关闭前逻辑、不需动态内容更新 → 用
popovertarget+popover布尔属性（即popover不带值） - 需要监听打开/关闭时机、要阻止默认行为、要配合表单或动画、要手动管理状态 → 必须用
popover="manual"+showPopover()/hidePopover() -
popover="auto"已被主流弃用，Chrome 125+ 开始警告，Safari 从不支持，别写
注意：popovertargetaction="show" 在 popover="manual" 元素上完全无效 —— 浏览器直接忽略，不会报错，但按钮点下去没反应。
popovertarget 模式下为什么点不动、不显示
这是最常卡住的环节，表面没报错，实际全失效：
立即学习“前端免费学习笔记（深入）”；
-
popovertarget的值必须严格匹配目标元素的id，且该id只能含字母、数字、-、_；popovertarget="help-tip"对应<div id="help-tip" popover>，不能是 <code>class="help-tip" - 目标元素（带
popover的那个）必须在页面首次渲染时就存在于 DOM 中；用innerHTML或append()动态插入后再加popover属性，Safari 17.4+ 直接无视 - 触发元素和目标元素之间**不能有 shadow DOM 隔离**；跨 shadow boundary 的
popovertarget在 Chromium 125 下已失效 - 目标元素若自带
display: block或position: absolute，会与 UA 默认的position: fixed冲突，导致定位错乱或不可见 - 必须写成
<div id="panel" popover="manual">，不能是 <code>popover（无值）、popover="auto"或data-popover - 目标元素不能是
<button></button>、<input>、<a></a>等可聚焦交互元素；Chrome 会静默跳过，showPopover()抛错 - 调用前未检测支持性：
if ("showPopover" in HTMLElement.prototype)缺失时，Safari/Firefox 直接TypeError，不是静默失败 - 元素尚未挂载到 document（比如在
document.createElement("div")后立刻调用），也会触发该错误 - Chromium 系（Chrome/Edge/Opera）114–125：支持
popovertarget和showPopover()，但z-index默认低于<select></select>、<video></video>，需手动加style="z-index: 10000;" - Safari 17.4+：仅支持
popovertarget模式，不支持showPopover()；且要求 popover 元素必须同步渲染，JS 动态插入无效 - Firefox：所有 popover 相关特性均未实现，
"showPopover" in HTMLElement.prototype返回false
showPopover() 调用时报 “The element does not have a popover attribute”
这个错误不是说你漏写了 popover，而是它没被浏览器识别为合法 popover 元素：
移动端和 Safari 用户实际能用吗
不能无差别用。当前（2026 年 5 月）真实支持情况：
真正跨浏览器稳定的方案仍是 <dialog></dialog>，它的 showModal() 行为明确、可访问性完整、polyfill 成熟；把精力花在 popover 兼容层上，不如用 dialog + 少量 CSS 定制来得可靠。
