ポップオーバー API
Baseline 2025
最近利用可能
*
2025年1月以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
* この機能の一部は、対応レベルにばらつきがある場合があります。
ポップオーバー API は、他のページコンテンツの上に表示するポップオーバーコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーコンテンツは、HTML 属性を用いて、または JavaScript を用いて制御することができます。
概念と使用方法
ウェブでは、他のコンテンツの上にコンテンツを示し、ユーザーにとって重要な情報や導くべき操作の詳細を示すというのが、とても一般的なパターンです。このコンテンツは、オーバーレイ、ポップアップ、ポップオーバー、ダイアログなど、さまざまな名称で呼ばれます。私たちは、このドキュメントを通して、これらをポップオーバーと呼ぶことにします。一般的に、これらは次のようなものがあります。
- モーダルというのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで（例えば、重要な選択がなされるまで）、反応しないようにレンダリングされるということです。
- 非モーダルというのは、ポップオーバーが表示されている間も、ページの残りの部分が反応するようにするということです。
ポップオーバー API を使用して作成されたポップオーバーは常に非モーダルです。モーダルポップオーバーを作成したい場合は、<dialog> 要素を使うのが適切です。2 つの間には明確な重複があります。ポップオーバーは、持続的なもので、HTML を使用して制御したい場合などに作成します。ポップオーバーの制御をダイアログの意味づけと組み合わせたい場合は、<dialog> 要素をポップオーバーすることもできます（<dialog popover> は完全に有効です）。
ポップオーバー API のよくある用途は、アクションメニュー、独自の「トースト」通知、フォーム要素のサジェスト、コンテンツピッカー、チュートリアル UI などのユーザーと対話する要素があります。
ポップオーバーは、複数の方法で作成することができます。
-
新しい一連の HTML 属性によって作成できます。トグルボタンを持つ単純なポップオーバーは、以下のコードで作成することができます。
html<button popovertarget="mypopover">ポップオーバーの切り替え</button> <div id="mypopover" popover>ポップオーバーコンテンツ</div> -
JavaScript API から。例えば、
HTMLElement.togglePopover()を使用してポップオーバーを表示と非表示のトグル切り替えができます。
同時に、ポップオーバー API では、ポップオーバーの表示・非表示の切り替えに応答するためのイベントや、ポップオーバーのスタイル設定を支援する CSS 機能も指定されています。ポップオーバー API の使用で、この API の詳細なガイドを参照してください。
関連する機能である関心インボーカーを使用することができます。JavaScript を必要とせずに、ホバーやフォーカス時にポップオーバーを表示させることができます。詳細については、関心インボーカーの使用をご覧ください。
HTML 属性
interestfor-
HTML の
<a>、<button>、<area>、または SVG の<a>要素を関心インボーカーとして定義します。その値は、呼び出し元要素に対する関心が生じたり失われたりした際に、何らかの影響（通常は表示または非表示）を受ける対象要素のidです。 popover-
グローバル属性で、ある要素をポップオーバー要素にします。値としてポップオーバー状態（
"auto"、"hint"、"manual"のいずれか）を取ります。 popovertarget-
<button>または<input>要素をポップオーバー制御ボタンにします。値として、制御するポップオーバー要素の ID を取ります。 popovertargetaction-
制御ボタン（
<button>または<input>）で制御しているポップオーバー要素に対して行う動作（"hide"、"show"、"toggle"の何れか）を指定します。
CSS 機能
::backdrop-
擬似要素
::backdropは、ポップオーバー要素の後ろに直接配置される全画面要素で、ポップオーバーの背後にあるページコンテンツに必要な効果を追加することができます（ぼかすなど）。 interest-delay,interest-delay-start,interest-delay-end-
interest-delay一括指定プロパティ、およびそれに関連するinterest-delay-startおよびinterest-delay-endの個別指定プロパティを使用することで、ユーザーが興味を示したり失ったりしてから、ブラウザーがその変化に応じて動作するまでの間に遅延を追加することができます。 :interest-sourceおよび:interest-target-
これらのセレクターは、関心が示された場合に限り、それぞれ関心インボーカーおよびそれに関連付けられた対象要素にスタイルを適用するために使用できます。
:popover-open-
:popover-open擬似クラスは、ポップオーバー要素が表示状態にあるときのみ一致します。これは、ポップオーバー要素が表示されているときのスタイル設定に使用できます。
インターフェイス
InterestEvent-
interestおよびloseinterestイベントのイベントオブジェクトです。これには、関連付けられた関心インボーカー要素への参照を含むsourceプロパティが含まれます。 ToggleEvent-
popover 要素の状態が表示と非表示の間で切り替わるときにユーザーに通知するイベントを表します。これは、
beforetoggleとtoggleイベント用のイベントオブジェクトで、ポップオーバーでその状態が変化するときに発行されます。
他のインターフェイスの拡張
インスタンスプロパティ
interestForElement-
関心インボーカーが対象としている要素への参照を取得または設定します。HTML または SVG の関心インボーカーが、その
interestfor属性でターゲット要素を参照している場合、その要素は、対応する DOM オブジェクトのinterestForElementプロパティで参照されます。HTMLButtonElement、HTMLAnchorElement、HTMLAreaElement、SVGAElementの各インターフェイスで利用可能です。 HTMLElement.popover-
要素のポップオーバー状態を JavaScript で取得または設定し（
"auto","hint","manual"のいずれか）、機能検出にも使用することができます。HTML のグローバル属性であるpopoverglobal を反映します。 -
この制御ボタンで制御されるポップオーバー要素を取得または設定します。JavaScript において HTML の
popovertarget属性に相当するものです。 -
この制御ボタンが制御するポップオーバー要素に対して行われるアクション（
"hide"、"show"、"toggle"の何れか）を設定または取得します。HTML のpopovertargetaction属性を反映します。
インスタンスメソッド
HTMLElement.hidePopover()-
ポップオーバー要素を最上位レイヤーから削除し、
display: noneでスタイル設定することにより、ポップオーバー要素を非表示にします。 HTMLElement.showPopover()-
ポップオーバー要素を最上位レイヤーに追加して表示します。
HTMLElement.togglePopover()-
ポップオーバー要素の表示状態と非表示状態を切り替えます。
イベント
beforetoggleイベント-
ポップオーバー要素の表示と非表示の状態が変わる直前、またはその逆で発行されます。 ポップオーバーが開くのを防ぐため、またはポップオーバーの状態に応じて他の要素を開始するために使用できます。
toggleイベント-
ポップオーバー要素の状態が、表示と非表示、またはその逆に変化した直後に発行されます。
interest-
関心が示された際に、関心インボーカーの対象要素に対して発生し、それに応じてコードを実行することができます。
loseinterest-
関心が失われた際に、関心インボーカーの対象要素に対して発生し、それに応じてコードを実行することができます。
例
- ポップオーバー API の例(英語)の事例集をご覧ください。
- 関心インボーカーの例(英語)の事例集をご覧ください。
仕様書
| 仕様書 |
|---|
| HTML # dom-popover |
| HTML # event-beforetoggle |
| HTML # event-toggle |
ブラウザーの互換性
api.HTMLElement.popover
api.HTMLElement.beforetoggle_event.popover_elements
api.HTMLElement.toggle_event.popover_elements
関連情報
- HTML
popoverグローバル属性 - HTML
popovertarget属性 - HTML
popovertargetaction属性 - CSS
::backdrop擬似要素 - CSS
:popover-open擬似クラス