HTMLElement: popover プロパティ

Baseline 2025 *

値

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

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

例

機能検出

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