popovertarget属性必须与popover属性配合使用才能生效；单独设置popovertarget="mypopover"无效，目标元素需同时设置popover="auto"或popover="manual"，否则视为普通自定义属性。
popovertarget 属性必须配合 popover 属性使用
单独写 popovertarget="myPopover" 不会生效——浏览器只认成普通自定义属性。真正触发弹出层，需要目标元素（比如 <div>）同时带 <code>popover 属性，且值为 "auto" 或 "manual"。
常见错误是只给弹出层加 popover，但忘了按钮上写 popovertarget；或者反过来，写了 popovertarget 却没给目标设 popover。
-
<button popovertarget="help">帮助</button>→ 必须对应<div id="help" popover>...</div> - 目标元素的
id值必须和popovertarget完全一致（区分大小写、不可含空格） -
popover属性本身不接受值（HTML5 中它是布尔属性），但现代实现中支持popover="auto"（自动显示/隐藏）或popover="manual"（需 JS 控制）
按钮点击后弹不出？检查是否遗漏 showPopover() 调用
当目标元素设置 popover="manual" 时，popovertarget 不会自动触发显示——它只负责绑定关系，实际展示要靠 JS。
此时按钮需手动调用方法：
document.querySelector('button').addEventListener('click', () => {
document.getElementById('help').showPopover();
});
而如果目标是 popover="auto"，点击按钮会自动显示/隐藏，无需 JS；但注意：同一页面只能有一个 popover="auto" 元素处于“激活”状态，否则行为不可预测。
-
showPopover()和hidePopover()是 DOM 方法，仅对带popover属性的元素有效 - 调用
showPopover()前确保元素已连接到 DOM（避免在DOMContentLoaded前操作） - 若目标元素初始被
display: none或未渲染，showPopover()会静默失败，无报错
样式失效或定位异常？别忽略 position: relative 这个隐性依赖
原生 popover 的定位基于其最近的 position: relative（或 absolute/fixed）祖先元素。如果按钮或 popover 父容器用了 position: absolute 但没设 top/left，可能导致 popover 弹出位置飘移甚至不可见。
- popover 默认以触发按钮的边界为锚点，但若按钮在滚动容器内，且容器有
overflow: hidden，popover 可能被裁剪 - 不能用
transform移动按钮来“调整弹出位置”——这会破坏锚点计算，导致偏移错误 - 目前所有浏览器都要求 popover 元素必须是 body 的直接子级或至少脱离普通文档流，否则定位逻辑可能不一致
兼容性差怎么办？先查 popover 是否被支持
Chrome 114+、Edge 114+、Safari 16.4+ 支持，Firefox 尚未实现。用前务必检测：
if (!('popover' in HTMLDivElement.prototype)) {
// 回退方案：用第三方库或手写 tooltip
}
即使属性存在，某些组合也无效：
-
popovertarget指向一个未设popover的元素 → 无反应，控制台也不报错 - 目标元素有
popover但没id→popovertarget查找不到，静默失败 - 多个按钮共用同一个
popovertargetID → 最后一个按钮的行为会覆盖前面的，但显示逻辑仍正常
真正在意兼容性时，不要只靠属性声明，得把 JS fallback 当成必选项，而不是“以防万一”。
