HTMLElement: popover プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

popover は HTMLElement インターフェイスのプロパティで、要素のポップオーバー状態（"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 Standard
# dom-popover

ブラウザーの互換性

BCD tables only load in the browser

関連情報