原生 popover 并非轻松可用，而是存在 popovertarget（声明式、限制极多）和 showpopover()（js 控制、当前唯一可行）两套互不兼容机制，且跨浏览器支持碎片化，safari/firefox 严重缺失，实际项目仍需降级方案。
不能“轻松构建”——popover 不是加个属性就弹的快捷开关，它分两套互不兼容的机制，选错路线或混用，页面上根本没反应。
popovertarget 模式：纯 HTML 声明式开关（只适合极简场景）
这种写法表面最“轻松”，但限制极多，实际可用性很低：
- 触发元素必须是可激活元素，比如
<button popovertarget="help"></button>，<div popovertarget="help"> 完全无效 <li>目标元素必须在 HTML 初始加载时就存在 DOM 中，<code>innerHTML = "...<div id="help" popover>" 或 <code>append()动态插入后加popover，Safari 17.4+ 和 Chrome 都大概率静默忽略 - 目标 ID 必须严格匹配：
popovertarget="tip-1"对应的是<div id="tip-1" popover>，ID 中含空格、点号、中文或写成 <code>class="tip-1"全部失效 - 目标元素不能在 shadow DOM 内，跨 shadow boundary 的
popovertarget在 Chromium 125+ 已被移除支持 - 不支持
popover="manual"或popover="auto"—— 必须是无值的popover（即布尔属性），否则 Safari 直接不识别 - 目标元素必须写成
<div id="menu" popover="manual">，<code>popover（无值）或popover="auto"都会报错或行为异常 - 目标元素不能是
<button></button>、<input>等可聚焦元素，否则调用showPopover()会直接抛DOMException - 调用前必须检测支持性：
if ("showPopover" in HTMLElement.prototype)，否则 Safari/Firefox 运行时直接TypeError，不是静默失败 -
showPopover()会自动关闭其他已打开的popover="manual"元素，这个行为无法禁用或配置 - 关闭按钮推荐写法：
<button onclick="this.closest('[popover]').hidePopover()">×</button>，避免硬编码 ID，也避开 shadow DOM 查找问题 - 默认以触发元素为中心居中，视口内自动避让边缘，但偏移量不可控、无 API
- 不支持箭头、placement（如
data-bs-placement完全无效）、锚点偏移（anchor属性仅 Chromium 实验性支持，Safari 不认） - 想微调只能用
[popover] { transform: translateY(-4px) translateX(2px); }，且该规则会影响所有 popover - 若目标元素自带
display: block或position: absolute，会与 UA 注入的position: fixed冲突，导致不可见或错位 - Chrome/Edge 114+ 支持
showPopover()+popover="manual"，但popover="auto"已被 Chrome 125+ 标记为弃用并警告 - Safari 17.4+ 仅部分支持
popovertarget，完全不支持showPopover()；且对动态插入、ID 格式、shadow DOM 更敏感 - Firefox 126+ 尚未实现任何 popover 机制，
"showPopover" in HTMLElement.prototype为false - 这意味着：不做降级，移动端 Safari 和全部 Firefox 用户看到的是空白或 JS 报错
showPopover() 模式：JS 主动控制（唯一能落地的方案）
这才是目前（2026 年中）真正可控、可调试、可嵌入业务逻辑的方式，但“轻松”二字不成立：
定位与样式：浏览器硬编码，CSS 能微调但不能接管
原生 popover 的位置不是靠 top/left 控制的，而是 UA 内部计算后注入 position: fixed + inset: 0，你写的 top: 10px 会被持续覆盖：
跨浏览器兼容性：别信“已支持”，先看真实现状
所谓“HTML5 原生 popover”目前仍是碎片化实现：
真正稳定的做法，仍是用 <dialog></dialog> 手动管理 open 属性，或引入轻量库如 tippy.js。原生 popover 的价值不在“开箱即用”，而在它定义了一套未来可收敛的语义契约——只是现在，契约还没签完。
