HTMLElement: popover プロパティ

Baseline 2025 *
Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

popoverHTMLElement インターフェイスのプロパティで、要素のポップオーバー状態("auto" または "manual")を JavaScript から取得したり設定したりします。機能検出に使用することもできます。

これは、HTML の popover グローバル属性の値を反映します。

列挙値です。取りうる値は次の通りです。

  • "auto": 自動状態になります。
    • ポップオーバーは「簡単に解除」することができます。これは、ポップオーバーの外をクリックするか、Esc キーを押すことで非表示にすることができます。
    • 通常、同時に表示できるポップオーバーは 1 つだけです。既に表示されているポップオーバーがあるときに 2 つ目を表示させると、1 つ目が非表示になります。このルールの例外は、入れ子の自動ポップオーバーがあるときです。詳しくは入れ子のポップオーバーを参照してください。
  • "manual": 手動状態になります。
    • ポップオーバーは「簡単に解除」することができませんが、宣言的な表示/非表示/トグルボタンは動作します。
    • 複数の独立したポップオーバーを同時に表示することができます。

機能検出

popover 属性を使用して、ポップオーバー API の機能を検出するすることができます。

js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

ポップオーバーをプログラムで設定

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

仕様書

Specification
HTML
# dom-popover

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
popover
hint value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Has more compatibility info.

関連情報