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.
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 # dom-popover |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
popover | ||||||||||||
hint value |
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- HTML の
popover
グローバル属性 - ポップオーバー API