HTMLElement：popover 属性

基线 2024

新可用

自 2024 年 4 月起，此功能可在最新的设备和浏览器版本上运行。此功能可能在较旧的设备或浏览器上无法运行。

popover 是 HTMLElement 接口的一个属性，通过 JavaScript（"auto" 或 "manual"）获取和设置元素的 popover 状态，可用于功能检测。

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

值

枚举值；可能的值为

"auto"：处于自动状态
- Popover 可以被“轻量级关闭”——这意味着您可以通过点击 popover 外部或按 Esc 键来隐藏 popover。
- 通常，一次只能显示一个 popover——当一个 popover 已经显示时显示第二个 popover 将会隐藏第一个 popover。此规则的例外是嵌套的自动 popover。有关更多详细信息，请参阅嵌套的 popover。
"manual"：处于手动状态
- Popover 无法被“轻量级关闭”，尽管声明式的显示/隐藏/切换按钮仍然有效。
- 可以同时显示多个独立的 popover。

示例

功能检测

您可以使用 popover 属性来检测 Popover API 的功能

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("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.");
}