【ポップオーバーエーピーアイ】

Popover API とは？

最終更新: 2026年10月4日

💡 前面に出す要素の開閉を、ブラウザの仕組みで扱う

ページの他の内容より前面に、非モーダルの要素を表示するHTMLとJavaScriptの仕組み。基本の開閉はHTML属性だけでも指定でき、表示中の要素はトップレイヤーで管理される。

📌 このページのポイント

ひよこ

HTMLだけで全部のUIが完成するの？

ペンギン先生

HTML属性だけでボタンからの基本の開閉を指定できるよ。例えばpopovertarget="menu"のボタンと、id="menu"にpopoverを付けた要素を関連付ける。位置や見た目、内容に応じた操作や意味付けは設計する必要があり、全部を自動で完成させる機能ではないんだ

ひよこ

外側をクリックすると必ず閉じるの？

ペンギン先生

popoverだけ、またはpopover="auto"なら、外側のクリックやEscなどで閉じられるよ。popover="manual"は外側クリックでは閉じないので、開閉ボタンなどを用意する。値によって動作が違うため、必要な振る舞いを確認するんだ

ひよこ

dialogタグとは何が違うの？

ペンギン先生

Popover APIで表示する要素は非モーダルで、背面も操作できるよ。dialogはshowModal()でモーダルに、show()で非モーダルに表示できる。dialog要素にpopoverを付けることもできるので、タグ名だけでモーダルかどうかが決まるわけではないんだ

ひよこ

トップレイヤーなら位置も決まるの？

ペンギン先生

通常のページ内容より前面に出す仕組みで、ボタンの横などへの自動配置を保証するものではないよ。標準の見た目は画面中央に表示され、別の位置にはCSSで指定する。::backdropで背面の見た目を変えても、それだけでモーダルにはならないんだ

ひよこ

どのブラウザでも同じように使える？

ペンギン先生

基本機能と関連する追加機能で対応状況が違うよ。MDNでは基本のPopover APIは2025年1月から最新のブラウザ間で利用可能とされるけど、古い環境や一部機能は別に確認する。実際の対象環境で開閉、キーボード操作、読み上げも確かめるんだ

まとめ：ざっくりこれだけ覚えればOK！

「Popover API」って出てきたら「非モーダルの要素を前面に出し、開閉を管理する標準機能」と思えばだいたいOK！

📖 おまけ：英語の意味

「Popover API」＝ポップオーバーを扱うAPI

💬 Popoverは、他の内容の上に表示する要素を指すよ。Popover APIでは表示や非表示をHTML属性やJavaScriptで操作でき、背面を操作不可にするモーダルにはならないんだ

参考資料