原生 popover 必须严格配对使用：按钮需设 popovertarget 且值精确匹配目标 id，目标元素必须带 popover 属性、可见且为可聚焦元素；popovertargetaction 仅支持 "show"、"hide"、"toggle"；firefox 和 safari 当前不支持该特性。

原生 popovertarget 必须和 popover 属性配对使用，单写 popovertarget 按钮完全没反应——这不是兼容性问题，是规范硬性要求。

按钮必须带 popovertarget，且值严格匹配目标元素 id

浏览器只认字符串精确匹配：大小写、连字符、空格全敏感。比如目标是 <div id="tip-1" popover></div>，按钮就得写 popovertarget="tip-1"，写成 "Tip-1" 或 "tip_1" 都失效。

• popovertarget 只能用在可聚焦/可激活元素上，比如 <button></button>、<input type="button">，不能用在 <div> 或 <code><span></span> 上
• 目标元素（如 <div>）必须有 <code>popover 属性，写成 popover="auto" 或 popover="manual" 都可以，但不能漏掉 popover 这个关键词本身
• 目标元素不能带 hidden、display: none 或 visibility: hidden，否则 showPopover() 会直接抛 DOMException: Cannot show a hidden popover

popovertargetaction 的三个合法值怎么选

popovertargetaction 不是万能开关，它只在目标已注册为 popover 后才生效。值只能是 "show"（默认）、"hide" 或 "toggle"，注意："close" 是无效值，仅在 <dialog></dialog> 子元素中被特殊识别，不适用于普通 popover。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• popovertargetaction="show"：每次点击都尝试显示，已显示时无效果
• popovertargetaction="hide"：只隐藏，不判断当前状态，适合做“关闭”按钮
• popovertargetaction="toggle"：最常用，但要注意——它依赖浏览器自动维护显隐状态，JS 无法干预；若用 JS 主动调用 togglePopover()，则需先设 popover="manual"，否则报错

为什么点了没反应？优先检查这三件事

常见静默失败不是 JS 错误，而是 HTML 结构或语义不达标：

• 目标元素没写 popover 属性（哪怕只写 popover 两个字也行，不用赋值）
• popovertarget 值和目标 id 不一致，包括拼写、引号位置（HTML 中引号可省略，但值里不能含空格）
• 在 Firefox 或 Safari 里测试——这两个浏览器截至 2026 年 8 月仍不支持 popover，控制台不会报错，只是完全忽略属性

真正麻烦的不是写法，而是定位和样式：原生 popover 不提供箭头、不支持自定义 placement（比如“按钮下方居中”），也不响应父容器滚动。如果需要跟随按钮移动或适配复杂布局，就得退回到 floating-ui 或手动计算 getBoundingClientRect() ——popovertarget 只解决“触发”，不解决“呈现”。