HTML popover 属性 — 完整深度解析

Source: Dev.to

popover 属性是一种现代的、内置的方式，用于创建轻量级的覆盖层，例如：

• 下拉菜单
• 菜单
• 工具提示
• 上下文面板
• 小型对话框

它是原生 HTML，这意味着：

• 不需要 JavaScript 库
• 不需要 ARIA hack
• 不需要 portal 逻辑
• 不需要复杂的焦点管理（大部分已为你处理）

它作为 Open UI / HTML Living Standard 的一部分加入，并已在现代的 Chromium、Safari 和 Firefox 版本中得到支持。

基本概念

popover 是一个隐藏的元素，可以通过属性声明式地显示/隐藏。你可以这样声明：

<div popover>
  Hello Popover
</div>

该元素默认是隐藏的。要显示它，只需将它关联到一个按钮：

<button popovertarget="myPopover">Open</button>

就是这么简单——不需要 JavaScript。

工作原理（内部实现）

当 popover 被打开时，它会从 display: none 中移除，进入顶层（类似 portal），渲染在所有堆叠上下文之上，独立于 z-index，且不会被 overflow: hidden 裁剪。

popover 属性值

popover="auto"（或仅 popover – 默认）

行为

• 点击外部会关闭它
• 按 Esc 键会关闭它
• 同一时间只能打开一个 auto popover

适用于菜单、下拉列表、工具提示和上下文面板。

popover="manual"

行为

• 不会 自动关闭
• 必须通过 JavaScript 手动关闭
• 可以同时打开多个 popover

当你需要自定义打开/关闭逻辑或构建复杂 UI 时使用此模式。

如何触发 Popover

声明式触发

<div popover id="myPopover">
  <button popovertarget="myPopover">Open</button>
  <div>Content</div>
</div>

控制切换行为

popovertargetaction 属性允许你指定动作（默认是 toggle，也可以是 show 或 hide）：

<button popovertarget="myPopover" popovertargetaction="show">Open</button>