popover
Baseline 2024
Newly available
Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
popover はグローバル属性で、要素をポップオーバー要素として示すために使われます。
ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input type="button"> に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。
開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。
使い方についての詳しい情報は、ポップオーバー API ランディングページを参照してください。
例
基本的な例
以下は、ポップオーバー要素を開くためのボタンを描画するものです。
html
<button popovertarget="my-popover">ポップオーバーを開く</button>
<div popover id="my-popover">私から皆さんへ、こんにちは！</div>
メモ: MDN にあるポップオーバーの例の完全な例にアクセスするには、ポップオーバー API 例のランディングページを参照してください。
仕様書
| Specification |
|---|
| HTML Standard # the-popover-attribute |
ブラウザーの互換性
BCD tables only load in the browser