popover属性不能直接用于气泡提示，因为它仅标记容器而不触发显示，必须配合showPopover()/hidePopover()调用；零JS下仅<dialog>支持，轻量提示应使用:hover/:focus-within+CSS。
popover属性为什么不能直接用在气泡提示上
popover 是 HTML 的原生全局属性，但它不是“一加就弹”的装饰性开关。它本身不触发显示逻辑，只标记元素为 popover 容器，必须配合 showPopover() 或 hidePopover() 才能控制显隐——这意味着纯 HTML（零 JS）下，popover 属性本身不会让气泡出现。
常见错误现象是：给 <div popover="manual">提示内容</div> 加了属性却完全没反应；或者误以为加 popover="auto" 就能自动跟随鼠标/焦点弹出——实际上 popover="auto" 仅对 <dialog> 元素有效，且仍需手动调用 show()。
使用场景里真正能零 JS 启动的，只有 <dialog> + popover + open 属性组合，但这是模态式弹层，不是轻量级气泡。
零 JS 实现轻量气泡的可行路径只有 CSS + :hover/:focus-within
popover 在当前阶段（Chrome 114+、Firefox 126+ 支持有限）无法绕过 JS 实现交互式气泡。要达成“零 JS 轻量提示”，必须放弃 popover，转用更底层、兼容性更好、无需运行时干预的方式：
立即学习“前端免费学习笔记（深入）”；
-
:hover配合position: absolute实现鼠标悬停提示 -
:focus-within配合tabindex实现键盘焦点提示 - 利用
aria-describedby关联提示内容，保障基础可访问性
性能影响极小，无渲染阻塞，所有浏览器都支持；而依赖 popover 的方案在 Safari 中至今未实现，Edge 也仅部分支持。
示例结构：
<span class="tooltip-trigger" tabindex="0"> 操作按钮 <span class="tooltip-popover">点击后将永久删除</span> </span>对应 CSS 中用
.tooltip-trigger:hover .tooltip-popover 和 .tooltip-trigger:focus-within .tooltip-popover 控制显隐。
强行用 popover + hidden 属性会遇到什么坑
有人尝试用 hidden + popover 模拟“默认隐藏”，再靠伪类切换 hidden，这行不通：
-
hidden是布尔属性，移除它不等于“激活 popover”；popover不监听 DOM 属性变化 -
popover="manual"元素默认不可见，且没有 CSS 伪类可响应其状态变更 - 即使通过 JS 切换
hidden，也不会触发浏览器的 popover 管理逻辑
容易踩的坑包括：
- 把
popover当成title的替代品，结果提示完全不出现 - 在非
<dialog>元素上设popover="auto"，被浏览器静默忽略 - 依赖
:has()检测 popover 状态（如:has([popover])），但该选择器无法匹配属性存在与否的交互状态
如果坚持用 popover，最小 JS 开销怎么压到一行
真要利用原生 popover API 做轻量提示，JS 无法彻底避免，但可以压缩到单事件绑定：
- 只需监听一次
click或focus，调用showPopover() - 用
popover="manual"避免意外触发 - 提示元素用
<div popover="manual">，不嵌套在触发器内，靠 CSS 定位对齐
实操建议：
- 触发器用
<button onclick="this.nextElementSibling.showPopover()">? - 提示元素紧跟其后：
<div popover="manual">这里是提示</div> - 加
popoverTargetAction="show"+popoverTargetElement可省去内联 JS，但需确保目标 ID 存在且唯一
兼容性现实是：Safari 无支持，Firefox 仅实验性开启，移动端几乎不可用。所谓“零 JS”在这里是个误导性前提——popover 的设计定位是 JS 驱动的原生弹层管理机制，不是 CSS 替代品。
真正轻量、可靠、零 JS 的气泡，还是得回到 :hover + :focus-within 这条路。原生 popover 当前的价值，在于统一管理复杂弹层的堆叠顺序和焦点行为，而不是取代 tooltip。
