html5 原生 popover 是通过 popover 全局属性（非传统属性）配合 showpopover()/hidepopover() 实现的声明式浮层机制，支持 auto/manual 模式、自动堆叠上下文与无障碍特性，需检测兼容性并降级。

HTML5 中并没有名为 Popover 的“属性”，目前（截至 2024 年）原生支持的弹出式浮层机制是通过 <dialog></dialog> 元素配合 popover 全局属性（属于 HTML Living Standard 提案，已进入 Chrome 114+ 稳定版并被 Firefox 126+ 和 Safari 17.4+ 部分支持）实现的。它不是传统意义上的“属性”，而是一个**控制显示行为与层级逻辑的声明式机制**。

popover 属性的基本用法

只需在任意元素上添加 popover 属性，并配合 showPopover() / hidePopover() 方法即可触发原生浮层：

• popover="auto"：默认值，支持显式调用方法控制，且可被点击外部自动关闭
• popover="manual"：仅能通过 JS 显式控制，不会因点击外部或按 Esc 自动关闭
• 元素需为“可 popover”的元素（如 <div>, <code><section></section>, <aside></aside> 等，<p></p> 或 <span></span> 默认不支持，需加 role="popover" 或使用语义化容器）

  示例：

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  <button id="trigger">打开菜单</button>
  <div id="menu" popover="auto">
    <h3>操作菜单</h3>
    <button>复制</button>
    <button>删除</button>
  </div>
  
  <script>
    const trigger = document.getElementById('trigger');
    const menu = document.getElementById('menu');
    trigger.addEventListener('click', () => menu.showPopover());
  </script>

  层级关系（stacking context）由浏览器自动管理

  Popover 元素天然具备独立的、受控的堆叠上下文，无需手动设置 z-index：

  • 所有 popover 元素默认渲染在普通文档流之上，但低于全屏 <dialog></dialog> 和系统级 UI（如 DevTools）
  • 多个 popover 同时存在时，后调用 showPopover() 的会自动置顶（LIFO 顺序），类似模态栈
  • 嵌套 popover 不被允许——浏览器会忽略子元素上的 popover 属性；若需嵌套交互，应使用单个 popover 内部布局，而非嵌套 popover 元素
  • 可通过 popoverTargetElement + popoverTargetAction 属性将触发与浮层解耦（类似 <button popovertarget="menu" popovertargetaction="show"></button>），此时层级仍由触发时机决定

  与传统方案的关键区别

  对比 <dialog></dialog> 或 CSS + JS 实现的浮层，popover 更轻量、更语义、更可控：

  • 无需 backdrop：popover 默认无半透明遮罩，如需遮罩需额外添加 <div id="backdrop" hidden> 并手动控制显隐 <li> <strong>不阻塞交互</strong>：默认非模态（除非显式设 <code>modal 属性，但当前仅 <dialog></dialog> 支持真正模态），用户仍可操作背景内容
  • 无障碍友好：自动处理焦点管理（打开时聚焦首个可聚焦子元素，关闭时返回触发源）、ARIA role 注入（role="popover"）、键盘导航（Tab、Esc）
  • 样式隔离：浏览器为 popover 创建独立的层叠上下文，其内部 z-index 不影响外部，外部 z-index 也无法穿透覆盖 popover 主体

  兼容性与降级建议

  目前 popover 是渐进增强特性，生产环境需考虑降级：

  • 检测支持：if ('popover' in HTMLElement.prototype)
  • 不支持时，回退到 <div class="tooltip-menu" style="position: absolute; z-index: 1000;"> + 手动定位 + 焦点/键盘逻辑 <li>避免依赖 popover 实现核心功能；将其视为增强体验的“锦上添花”</li> <li>注意 Safari 对 <code>popoverTargetAction 的支持稍晚，优先使用 JS 控制方法