原生 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>、<input type="button">，不能用在<div>或<span>上 - 目标元素（如
<div>）必须有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> 子元素中被特殊识别，不适用于普通 popover。
-
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 只解决“触发”，不解决“呈现”。
