HTML Popover API：ライブプレイグラウンドとリファレンス
HTML Popover APIプレイグラウンド
HTML Popover API：popovertarget、showPopover、イベント | We.Inc
Popover APIをその場で試せます。auto、manual、hintのポップオーバー、popovertargetボタン、showPopover、hidePopover、togglePopoverに加え、beforetoggleとtoggleイベントのログも表示します。
任意の要素にpopover属性を付け、ボタンからpopovertarget="id"で指定するだけで、開閉、トップレイヤー、Escapeキーの処理をJavaScriptなしでブラウザーが行ってくれます。スクリプトではshowPopover()、hidePopover()、togglePopover()を呼び出し、beforetoggleとtoggleのイベントを監視します。popover="auto"は外側をクリックすると閉じますが、manualは閉じません。
ポップオーバーの種類
- 値
- 外側のクリックやEscapeで閉じるか
- ほかのポップオーバーとの関係
- popover または popover="auto"
- 閉じる
- 開くと、祖先を除くほかのautoポップオーバーが閉じる
- popover="manual"
- 閉じない、自分で閉じる
- いくつでも同時に開ける
- popover="hint"
- 閉じる
- 祖先ではないほかのhintポップオーバーを閉じる。ツールチップ向け
かつてポップオーバーといえば、位置決めライブラリ、外側クリックのハンドラー、z-indexとの格闘を意味していました。Popover APIは、そのすべてをHTMLに移します。下のプレイグラウンドはブラウザー内に本物のポップオーバーを作るので、種類を切り替えたり、コードから操作したり、イベントが発生する順序を観察したりできます。
- プレイグラウンドで、ポップオーバーの種類をauto、manual、hintから選びます。
- 宣言的なボタンで開くか、スクリプトのボタンで3つのメソッドを呼び出します。
- 外側をクリックするかEscapeを押し、どの種類が自動で閉じるかを確認します。
- イベントログを読みます。先にbeforetoggle、次にtoggleが発生し、どちらもoldStateとnewStateを持っています。
- popovertargetを付けられるのはbutton要素とinput要素だけです。キーボードのユーザーも操作できるよう、本物のボタンを使いましょう。
- popovertargetactionにはtoggle（デフォルト）、show、hideを指定できるので、開くボタンと閉じるボタンを分けてもスクリプトは不要です。
- 開いた状態は:popover-openでスタイルを付け、背後のページは::backdropで暗くしましょう。
- ポップオーバーはモーダルではありません。ページに戻る前に必ず入力を完了させたいフォームには、showModal()で開くdialogを使いましょう。
- 表示中のポップオーバーはトップレイヤーに置かれるので、ほかの要素より前面に出すために大きなz-indexを指定する必要はもうありません。
よくある質問
Popover APIに対応しているブラウザーは？
MDNでは、Popover APIは2025年1月からBaseline（新たに利用可能）とされており、主要ブラウザーの最新版で動作します。hint値のような新しい部分は対応範囲が狭い場合があるので、頼る前に互換性の表を確認してください。
autoとmanualのポップオーバーの違いは何ですか？
autoのポップオーバーはライトディスミスに対応しています。外側をクリックするかEscapeを押すと閉じ、開くとほかのautoポップオーバーが閉じます。manualのポップオーバーはボタンかスクリプトで閉じるまで開いたままで、複数を同時に開けるため、トースト通知に向いています。
Escapeですべてのポップオーバーが閉じますか？
Escapeで閉じるのはautoとhintのポップオーバーで、外側のクリックで閉じるものと同じです。manualのポップオーバーはどちらも無視するので、専用の閉じるボタンかhidePopover()の呼び出しが必要です。
ポップオーバーが開いたり閉じたりしたことを知るには？
ポップオーバー要素でtoggleイベントを監視します。newStateは"open"か"closed"です。beforetoggleイベントは変化の直前に発生するので、コンテンツの準備に使えます。
ポップオーバーはデフォルトでどこに表示されますか？
トップレイヤーで、fixedの位置指定によりviewportの中央に表示されます。位置は独自のCSSで、またはブラウザーが対応していればアンカー配置で移動できます。
まずは宣言的に
- ほとんどのポップオーバーには、スクリプトがまったく必要ありません。ボタンとポップオーバーはidで結び付けられ、開閉、ライトディスミス、Escapeキーはブラウザーが処理します。
- showPopover()などのメソッドを使うのは、フォームのチェックに失敗した後にヒントを開く、タイマーでトーストを閉じるなど、きっかけがボタンではない場合です。
メニュー、トースト、ヒント
- autoは、注意がほかに移ったら消えるべきメニューや選択画面に向いています。manualは、積み重なって閉じられるまで残る通知に向いています。hintはホバーやフォーカスで出るツールチップ向けです。
- どの種類でも内容は短くし、中のすべての操作にキーボードからも届くようにしましょう。
Popover APIリファレンス
属性、メソッド、イベント、セレクター
- グローバル属性
- 要素をポップオーバーにする。auto、manual、hint
- buttonまたはinputの属性
- そのコントロールが開閉するポップオーバーのid
- buttonまたはinputの属性
- toggle（デフォルト）、show、hide
- showPopover()
- メソッド
- ポップオーバーをトップレイヤーに追加する
- hidePopover()
- メソッド
- トップレイヤーから取り除いて非表示にする
- togglePopover()
- メソッド
- 非表示なら表示し、表示中なら非表示にする
- イベント
- 状態が変わる前に発生する。oldStateとnewStateを持つ
- イベント
- 状態が変わった後に発生する。oldStateとnewStateを持つ
- :popover-open
- CSS疑似クラス
- 表示中のポップオーバーに一致する
- ::backdrop
- CSS疑似要素
- 表示中のポップオーバーの背後のレイヤー
JavaScriptを使わないポップオーバーの例
これらのフレームはスクリプトをオフにして動いていますが、動作がHTMLから来ているため、ポップオーバーは機能します。
autoポップオーバーのメニュー
ボタンをクリックし、次にほかの場所をクリックするかEscapeを押してください。メニューが自動で閉じます。
表示ボタンと非表示ボタンを分けたmanualのトースト
ここでは外側をクリックしても何も起きません。閉じるのは非表示ボタンだけです。
ポップオーバーの背後のページを暗くする
::backdropはポップオーバーの下のレイヤーにスタイルを付けます。それでもモーダルではなく、背後のページをクリックすると閉じます。
JavaScriptからポップオーバーを操作する
メソッド、イベント、機能検出
メソッドを呼び出す前に対応状況を確認し、toggleイベントでnewStateを読み取ります。
ポップオーバープレイグラウンド
ここではブラウザーが本物のポップオーバーを動かしています。種類を切り替え、メソッドを呼び出し、イベントログを確認しましょう。
宣言的なボタン（popovertarget）
スクリプトのメソッド
これは{v}ポップオーバーです。外側をクリックするかEscapeを押して、ライトディスミスを試してください。
閉じる
状態：{v}
イベントログ
ログを消去
まだイベントはありません。
このブラウザーはPopover APIに対応していないため、プレイグラウンドはオフになっています。
エラー：{v}
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る