はじめに
どうもどうも。
最近めっきり寒くなりましたねぇ。
さて、今回はPopover API（ポップオーバー API）について書いていきたいと思います。
Webサイトでツールチップやドロップダウンメニューを実装する時は、JavaScriptライブラリに頼ることが多かったと思います。
現在全ての主要ブラウザでサポートされているPopover APIを使えば、Javascriptを書くことなくHTMLとCSSだけでツールチップやドロップダウンメニューを実装することができるようになりました。
Popover APIについて
Popover APIとは
Popover APIは、他のコンテンツの上にポップオーバーコンテンツを表示するためのWeb標準APIです。
HTMLの属性やJavaScriptで制御する事ができます。
これまでの課題
これまでポップオーバーを実装する際には課題がありました。
- z-indexの管理がカオス
- フォーカスの制御がカオス
- 外側クリックでの閉じる処理を実装する必要がある
- JavaScriptライブラリへの依存
Popover APIが提供する機能
Popover APIを使用すると、ブラウザが自動的に以下を処理してくれます。
z-indexを気にしなくて良いというのが最高に良いですね！！！！
- トップレイヤーへの自動的な配置 : z-indexを気にしなくてOK!
- ライトディスミス機能 : 外側をクリックすると自動で閉じる
- フォーカス管理 : ポップオーバーを開くとポップオーバーにフォーカスされる
- キーボードバインディング : Escキーで閉じる
ブラウザサポート
基本的な機能は、主要なブラウザでサポートされています。
基本的な使い方
以下のように使用します。
<button popovertarget="popover1">ポップオーバーを開く</button>
<div id="popover1" popover>
<p>ポップオーバーコンテンツ</p>
</div>
popovertarget属性でポップオーバーさせたい要素のIDを指定し、ポップオーバーさせたい要素にはpopover属性を指定します。
これだけで、以下の機能が動作します。
- ボタンをクリックするとポップオーバーが表示される
- 外側をクリックすると閉じる
- Escキーで閉じる
- フォーカス管理が自動的に行われる
具体的な挙動は以下で確認してください。
popover属性の値
popover属性にはauto | manual | hint3つの値を指定できます。
| 値 | 特徴 | その他 |
|---|---|---|
| auto (初期値) |
・ライトディスミス（外側クリックで閉じる）が有効 ・他のautoポップオーバーを自動的に閉じる |
一般的な使用ケースと思われます |
| manual | ・ライトディスミスが無効 ・他のポップオーバーを閉じない ・明示的に閉じるボタンが必要 |
トースト表示やドロップダウンのメニューに良さそう |
| hint (初期値) |
・ライトディスミスが有効 ・他のポップオーバーを閉じない(hintは閉じる) |
ツールチップに良さそう |
挙動は以下から確認してください。
ただし、hintに関しては2025年10月現在、仕様通りの挙動とならないため注意が必要です。
popovertargetaction属性
ポップオーバーのトリガーとなる要素にpopovertargetaction属性属性を仕様してポップオーバーに対するアクションを指定できます。
popovertargetaction属性にはtoggle | show | hide3つの値を指定できます。
| 値 | 特徴 |
|---|---|
| toggle (初期値) |
ポップオーバーの表示・非表示が切り替える |
| show | ポップオーバーを表示するのみ |
| hide | ポップオーバーを非表示にするのみ |
挙動は以下から確認してください。
スタイリングによる位置調整
ポップオーバーの背景色などは通常の要素と同様に可能です。
ただし、ポップオーバーの表示位置に関しては、デフォルトでは画面の中央に配置されてしまいます。
かつ、要素との相対の位置指定ができないため、ツールチップのように特定の要素の相対位置に表示したい場合はCSS Anchor Positioningと組み合わせて対応しましょう。
基本的な使い方
anchor-nameとposition-anchorで要素同士を関連付けて、position-areaで位置調整を行います。
HTML
<button id="menu-button" popovertarget="menu">メニュー</button>
<div id="menu" popover>
<p>メニューコンテンツ</p>
</div>
CSS
/* ボタンをアンカーとして設定 */
#menu-button {
anchor-name: --menu-anchor;
}
/* ポップオーバーをアンカーに紐付け */
#menu {
position: absolute;
position-anchor: --menu-anchor;
/* ボタンの下・中央に配置 */
position-area: bottom center;
margin: 0;
inset: unset;
}
挙動は以下から確認してください。
暗黙的なアンカー
popovertargetを使って、紐付けられたボタンは自動的にアンカーになるため、anchor-nameとposition-anchorは不要です。便利ですね。
HTML
<button popovertarget="tooltip">ヘルプ</button>
<div id="tooltip" popover>ヘルプテキスト</div>
CSS
#tooltip {
position: absolute;
/* ボタンが暗黙的にアンカーになる */
position-area: top center;
margin: 0;
}
まとめ
Popover APIは、これまでJavaScriptライブラリに頼っていたポップオーバー実装を、Web標準として提供してくれるAPIです。
- シンプル : HTMLだけで基本的な実装が可能
- 高機能 : フォーカス管理、ライトディスミス、アクセシビリティが組み込み
- 軽量 : 外部ライブラリ不要
- 標準化 : 主要ブラウザでサポート
hintなど今後のブラウザ対応でどんどん便利になっていくので、今後も定期的に情報チェックが必要ですね。
それではみなさま、またいつか〜。
Discussion