popover
Baseline 2025Newly available
Since January 2025, 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 ランディングページを参照してください。
例
基本的な例
以下は、ポップオーバー要素を開くためのボタンを描画するものです。
<button popovertarget="my-popover">ポップオーバーを開く</button>
<div popover id="my-popover">私から皆さんへ、こんにちは!</div>
メモ: MDN にあるポップオーバーの例の完全な例にアクセスするには、ポップオーバー API 例のランディングページを参照してください。
仕様書
Specification |
---|
HTML # the-popover-attribute |
ブラウザーの互換性
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
- 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.