popover属性在HTML标准中根本不存在，它只是Chrome/Edge 114+实验性支持的全局属性，必须配合showPopover()/hidePopover()等JavaScript调用才能生效，无法脱离JS实现弹窗；真正零JS的原生方案仅有details/summary和title属性。
popover属性在HTML中根本不存在
HTML标准里没有popover属性。你看到的可能是浏览器实验性支持的popover全局属性（Chrome 114+、Edge 114+），但它不是“原生无JS弹窗”的开箱即用方案——它必须配合showPopover()或hidePopover()调用，本质仍需JS触发。
真正零JS实现弹窗的原生方案只有两个：details/summary，以及极有限场景下的title属性。别被“popover”关键词误导，它目前不是纯声明式特性。
用details实现可点击展开的纯HTML弹窗
这是目前唯一无需JS、语义正确、兼容性极佳（IE11+）的原生弹窗方案：
<details> <summary>点击展开</summary> <p>这里是弹窗内容，支持任意HTML</p> </details>
-
details默认收起，点击summary展开，再点收起 - 可通过
open属性初始展开：<details open> - CSS可完全自定义样式（包括箭头、背景、动画），但
summary不能用display: none隐藏，否则失去交互 - 不支持定位（如悬停显示、右下角浮层），仅限线性文档流内展开
为什么popover属性不能脱离JS运行
即使浏览器支持popover属性，它只做两件事：标记元素为弹出容器、指定锚点关系。所有显示/隐藏动作都必须由JS驱动：
立即学习“前端免费学习笔记（深入）”；
<button id="trigger">触发按钮</button>
<div id="popup" popover>弹窗内容</div>
<script>
document.getElementById('trigger').addEventListener('click', () => {
document.getElementById('popup').showPopover(); // 必须调用
});
</script>
- 没JS调用
showPopover()，popover属性本身不会让元素显示 - 不支持
:hover或:focus自动触发，CSS无法接管显示逻辑 - 若禁用JS，整个
popover功能退化为普通div，无任何行为 - 当前仅Chrome/Edge支持，Firefox/Safari尚未实现
替代方案选型建议
根据真实需求选最简路径：
- 只需“点一下展开一段说明” → 用
details，零成本、无障碍友好、无兼容风险 - 需要悬浮提示（如图标tooltip） → 只能靠
title属性，内容受限、样式不可控、移动端不触发 - 真要定位弹窗+丰富交互 → 接受JS依赖，用
popoverAPI 或成熟库（如tippy.js），别硬套“无JS”幻想 - 误以为
popover是HTML5新属性想写进模板 → 先查WHATWG spec，它仍是Living Standard里的实验特性，非正式标准
把popover当纯HTML属性用，结果页面什么也不发生——这是最常卡住的地方。它不像required或disabled那样自带行为，而是一个需要JS激活的“开关标记”。
