HTML 弹出层全局属性

Baseline 2024 *

新推出

自 ⁨2024 年 4 月⁩ 起，此功能可在最新的设备和浏览器版本中运行。此功能可能不适用于较旧的设备或浏览器。

* 此特性的某些部分可能存在不同级别的支持。

popover 全局属性用于将元素指定为弹出层元素。

值

popover 属性可以接受以下值之一：

"auto": auto 弹出层可以被“轻拂关闭”（light dismissed）——这意味着您可以通过点击弹出层外部或按下 Esc 键来隐藏弹出层。显示一个 auto 弹出层通常会关闭其他已显示的 auto 弹出层，除非它们是嵌套的。

注意： 为 popover 设置空值 — popover 或 popover="" — 等同于设置 popover="auto"。
"hint" 实验性: hint 弹出层在显示时不会关闭 auto 弹出层，但会关闭其他 hint 弹出层。它们可以被轻拂关闭，并响应关闭请求。
"manual": manual 弹出层不能被“轻拂关闭”，也不会自动关闭。弹出层必须通过声明式的显示/隐藏/切换按钮或 JavaScript 来显式显示和关闭。可以同时显示多个独立的 manual 弹出层。

弹出层元素通过 display: none 隐藏，直到通过一个调用/控制元素（例如，带有 popovertarget 属性的 <button> 或 <input type="button">）或 HTMLElement.showPopover() 调用打开。

打开时，弹出层元素将显示在顶层的所有其他元素之上，并且不受父元素的 position 或 overflow 样式的影响。

具有 auto 状态的弹出层可以使用关联的控件（由 popovertarget 属性指定）显示和隐藏，并且可以通过点击弹出层区域外部、打开另一个弹出层或按下浏览器特定机制（如 Esc 键）来“轻拂关闭”。

通常一次屏幕上只能显示一个 auto 弹出层 — 当一个弹出层已显示时，再显示第二个弹出层会隐藏第一个。此规则的例外是当您有嵌套的 auto 弹出层时。有关更多详细信息，请参阅嵌套弹出层。

它们也可以使用 JavaScript 进行控制，例如，可以使用 HTMLElement.togglePopover() 方法在显示和隐藏之间切换弹出层。

相比之下，manual 弹出层必须手动显示和隐藏 — 它们在显示时不会自动关闭其他弹出层，也不能被轻拂关闭。这允许在需要同时显示多个弹出层的用例中使用。

hint 弹出层在显示时不会关闭 auto 弹出层，但会关闭其他 hint 弹出层。它们可以被轻拂关闭，并响应关闭请求。

通常，hint 弹出层是响应非鼠标点击的 JavaScript 事件（如 mouseover/mouseout 和 focus/blur）来显示和隐藏的。点击按钮打开 hint 弹出层会导致一个已打开的 auto 弹出层被轻拂关闭。

有关用法的详细信息，请参阅 Popover API 入门页面。

以下代码渲染了一个按钮，该按钮激活时将打开一个弹出层元素。

html

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

注意： 请参阅我们的 Popover API 示例入门页面以访问 MDN 弹出层示例的完整集合。

规范
HTML # the-popover-attribute

此页面最后修改于 ⁨2025年7月9日⁩，由 MDN 贡献者修改。