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.");
}