原生 popover 属性与 popovertarget 机制不兼容，混用会导致行为异常；多触发元素必须共用同一 popover 元素且 popovertarget 值严格匹配其 id；开关由浏览器自动管理，禁用手动 toggle；定位由 anchor 元素决定，非 popover 自身 CSS 控制。
popover属性和popovertarget不能混用
HTML原生 popover 属性（如 popover="auto"）和 popovertarget 属于两套不兼容的机制：前者是声明式、基于锚点定位的轻量提示，后者是命令式、需显式触发/关闭的模态气泡。强行混用会导致行为不可预测——比如点击一个 popovertarget 元素后，另一个带 popover="hint" 的元素可能意外收起或卡死。
多触发元素必须共用同一个 popover 元素
原生 popover 要支持多个触发源，核心前提是所有触发元素都指向同一个 <div popover> 容器。不能为每个按钮单独配一个 popover 元素，否则浏览器无法协调开关状态。
- ✅ 正确做法：所有触发按钮用
popovertarget="my-popover"，且页面中只存在唯一一个<div id="my-popover" popover> - ❌ 错误写法：多个
<div popover>各自带不同id，或触发元素指向不存在的popovertarget值 - ⚠️ 注意：
popovertarget值必须严格匹配目标元素的id，大小写敏感，且目标必须在 DOM 中已存在（不能动态插入后才绑定）
开关逻辑由浏览器自动管理，但需避免手动 toggle 干扰
原生 popover 的显示/隐藏由浏览器根据 popovertarget 点击自动处理，不需要 JS 调用 showPopover() 或 hidePopover()。手动干预反而容易破坏状态同步。
- 点击任一触发元素 → 浏览器自动 show 对应 popover
- 点击 popover 外部、按 Esc、或点击另一个同 target 的触发元素 → 自动 hide
- 如果需要“点击再次关闭”，得加
popovertargetaction="toggle"，而不是靠 JS 监听 click 后调用hidePopover() - 多个触发元素之间切换时，浏览器不会重置 popover 位置——它始终锚定在最后一次触发的元素上，这是预期行为，不是 bug
样式和定位受 anchor 元素影响，不是 popover 自身控制
原生 popover 的位置由触发元素（anchor）决定，不是由 <div popover> 的 CSS position 控制。即使你给 popover 加了 top/left，也会被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
- 想调整弹出方向：用
anchor属性配合position: anchor(center)等 CSS 函数，而非传统定位 - 想让多个触发元素共享同一视觉位置（比如都从顶部居中弹出），需确保它们具有相同尺寸和布局上下文，否则 anchor 位置天然不同
- 移动端 Safari 目前不支持
anchor定位函数，仅支持基础popover="auto"或popover="hint"，此时位置由浏览器内部规则决定，不可控
