popover 不是 HTML 标准属性，Chrome 114+ 的 <div popover> 需配合 showPopover() 等 JS 调用才能生效，不支持 hover 自动触发、placement 等配置；纯 CSS :hover 方案兼容性好但移动端无效；title 属性是唯一零 JS 提示，但样式与无障碍支持极差。
HTML popover 属性目前不被原生支持
直接说结论：popover 不是 HTML 标准属性，浏览器不会识别 <div popover> 这类写法。你看到的“原生 popover”实际来自 Chrome 114+ 引入的 <div popover> 元素 + showPopover() API，但它**必须配合 JS 调用才能显示**，不是纯 HTML 属性驱动的“开箱即用”提示。
Chrome 的 popover 元素需要显式 JS 控制
这个特性本质是新增了一个 HTML 元素类型（popover 是 div 的布尔属性，但仅当元素有该属性且被 JS 激活时才生效），不是 CSS 或 attribute 触发的声明式行为：
-
popover必须写在目标元素上，例如<div id="tip" popover>内容</div> - 必须调用
element.showPopover()才能显示，hidePopover()关闭 - 没有 hover/click 自动绑定 —— 想实现鼠标悬停弹出，仍得写
onmouseover或事件监听 - 不支持 placement、arrow、delay 等传统 tooltip 参数，箭头位置由 UA 决定，不可配置
替代方案：纯 CSS 实现 hover 气泡提示更可靠
如果目标是“不用 JS 就能 hover 显示提示”，CSS :hover + position: absolute 仍是主流且兼容性最好的做法：
<span class="tooltip">
悬停我
<span class="tooltip__pop">这是气泡内容</span>
</span>
.tooltip__pop {
display: none;
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
.tooltip:hover .tooltip__pop {
display: block;
}
注意点：
- 需确保父容器
position: relative，否则absolute定位会脱出上下文 - 移动端无
:hover，这类纯 CSS 提示在触摸设备上基本无效 - 无障碍支持弱（没
aria-label或焦点管理），不能替代语义化提示
真正“零 JS”的提示只适用于极简场景
浏览器原生支持的唯一零 JS 提示是 title 属性：
<button title="保存文档">?</button>
但它问题明显：
- 样式完全不可控（字体、颜色、延迟、持续时间全由系统决定）
- 不支持换行、HTML、图标或交互
- 在 Safari 和 Firefox 中触发延迟长、易消失，移动端几乎不显示
- 对屏幕阅读器不友好（部分读屏工具忽略
title）
所以所谓“原生 popover 属性”目前只是个半成品 API，离“写个属性就弹出”的理想状态还很远。真要稳定交付，JS 驱动的轻量库（如 tippy.js）或 CSS + 少量 JS 补全移动端/无障碍，仍是更务实的选择。
