yuheijotaki.com

ポップオーバーAPIを試してみた

目次

はじめに

アクションメニュー、トーストなどの非モーダルな覆い被さる系のUIを表現する ポップオーバーAPI についての検証記事。

サポート状況

最新版のFireFox125でサポートされ、各モダンブラウザの最新版ではサポート済み。
参考： HTMLElement API: popover | Can I use…

概要

MDNのサンプル（Popover API examples）を見ると挙動が分かりやすい。 使い方としては主に2種類ある。

  1. HTML属性によって宣言的に作成する
  2. JavaScript APIからコントロールする

1のHTMLのみでもUI実装が可能ということも特長のひとつのようで、この記事でもHTMLを中心に見ていきたい。

基本

ポップオーバーを作成する場合、次のHTMLで実現できる。

<button popovertarget="mypopover">ポップオーバーの切り替え</button>
<div id="mypopover" popover>ポップオーバーコンテンツ</div>

3つのHTML属性が使用できる。

属性 popover

ポップオーバー要素として扱う要素に付与する。 付与された要素は、デフォルトで非表示（display: none状態）となり展開された場合にはトップレイヤーに表示される。

値同時に表示他の開閉簡単な解除その他
"auto"不可閉じる有効空の場合は "auto"
"manual"可閉じない無効 
  • 同時に表示
    • 独立した複数のポップオーバーを同時に表示するか否か
  • 他の開閉
    • 開いたときに他のポップオーバーUIを閉じるか否か
  • 簡単な解除
    • Light Dismissと言われるもので、ESCキー/ポップオーバー外側をクリックで閉じるなどが有効か否か

属性 popovertarget

<button>（または <input> の type="button"）に制御するポップオーバーのIDを値として設定する。

属性 popovertargetaction

ポップオーバーの表示と非表示動作を値として設定する。

値動作
"toggle"ポップオーバーが非表示の場合は表示され、ポップオーバーが表示されている場合は非表示にする。空の場合は "toggle"
"show"非表示のポップオーバーを表示する
"hide"表示されているポップオーバーを非表示にする

使い所

モードレスで重要な情報や導くべき操作の詳細を示すものに使用する、と定義してみる。
MDNでは下記の説明がある。

オーバーレイ、ポップアップ、ポップオーバー、ダイアログなど、さまざまな名称で呼ばれます。
…
ポップオーバー API を使用して作成されたポップオーバーは常に非モーダルです。
…
ポップオーバー API のよくある用途は、アクションメニュー、独自の「トースト」通知、フォーム要素のサジェスト、コンテンツピッカー、チュートリアル UI などのユーザーと対話する要素があります。

Webサイトではポップオーバーが頻出するイメージはあまり湧かないが、クリックすると展開されるメニューやツールチップが該当しそう。
例えばAPGで例が掲載されている Actions Menu Button Example はpopoverの使い所に近いのではと感じた。

スタイリング

次の擬似クラス、要素に対してスタイリングを行う。
だいたいアニメーションさせるのに一癖あるのもdialog要素と似ている。

:popover-open

ポップオーバーが開いている状態で付与される疑似クラス

::backdrop

ポップオーバーの背景として付与される疑似要素

位置調整

いじっていて気付いたが最上位レイヤーに配置されるため、トリガーとなるボタンなどが配置されている要素起点の位置指定はCSSのみだと難しい認識。 CSS Anchor Positioning がいつの日かサポートされればツールチップなども手軽に実現できそう。

キーボード移動

popover 属性が "auto" の場合、 popovertarget 属性が付いたトリガーをクリックした後ポップオーバー要素内にフォーカスは移動しない。
これを実現するために最初のリンク要素に autofocus を付与しておくなどの対応が必要。
またポップオーバー表示中は背後のコンテンツへもフォーカス移動が可能。

まとめ

できるなら使いたいと思ったが、左右中央配置以外では位置調整が難しそうでそこが解消しないとなという感想。
期待はしていないがモードレスな被さるUIはちょくちょく実装することがあるため引き続き追っていきたい。

参考資料