HTMLElement: popover 属性

基线 2025 *

新推出

自 ⁨2025 年 1 月⁩ 起，此功能在最新的设备和浏览器版本中均可正常工作。此功能可能无法在旧设备或浏览器中工作。

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

HTMLElement 接口的 popover 属性通过 JavaScript 获取和设置元素的 popover 状态（"auto"、"hint" 或 "manual"），也可用于特性检测。

它反映了 popover 全局 HTML 属性的值。

值

这是一个枚举值；可能的值有：

"auto"

auto popover 可以被“轻微关闭”（light dismissed）——这意味着你可以通过点击 popover 外部或按 Esc 键来隐藏 popover。

通常，一次只能显示一个 auto popover——当一个 popover 已经显示时，显示第二个 popover 会隐藏第一个。该规则的例外情况是当你有嵌套的 auto popover 时。有关更多详细信息，请参阅嵌套 popover。

"hint" 实验性

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

它们通常在响应非点击 JavaScript 事件时显示和隐藏，例如 mouseover/mouseout 和 focus/blur。点击一个按钮打开 hint popover 会导致一个已打开的 auto popover 被轻微关闭。

"manual"

manual popover 不能被“轻微关闭”，也不会自动关闭。Popover必须通过声明式显示/隐藏/切换按钮或 JavaScript 来显式显示和关闭。可以同时显示多个独立的 manual popover。

示例

特性检测

你可以使用 popover 属性来检测 Popover API。

function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}