【Web標準のポップオーバーUI】 Popover API を実務で使うときのコツ

ポップオーバーUIを簡単に実装できるPopover APIを実務で使ってみて、よいところといくつか注意点が見えてきましたので、まとめてみました。

Popover APIで表現できること

ツールチップやトースターなどのモードレス（前面に表示された要素以外も操作可能な状態）なUIをJavaScript無しで実装できます！
もちろん、JavaScriptで操作することも可能です。

似たような挙動を実現できるdialog要素もありますが、モードレスなUIをdialog要素で実装しようとすると、いろいろカスタマイズが必要になってしまうので…、ぜひPopover APIでの実装を検討しましょう！
モーダルダイアログやオフキャンバスメニューなどのモーダル（前面に表示された要素以外は操作できない状態）なUIを実装したい場合は、dialog要素で実装しましょう！

実務で使って大丈夫？ブラウザ対応状況は？

実務で使う場合に必ず気にしなければいけないブラウザ対応状況ですが、デスクトップではすべてのブラウザに対応しています。ただ、モバイルデバイスではAndroid Chromeには対応しているものの、iOS Safariでは部分的に挙動が確認できるもののバグが存在しており、完全に対応しているといえる状態ではありません。
よって、「デスクトップでのみ機能する」という要件であれば、いますぐ実務でも使うことができます。

ポップオーバー API - Web API | MDN

Popover APIのよいところ

Webの仕様で定められた機能

表示/非表示の状態変化やフォーカス管理、非表示にする操作などブラウザがよしなに対応してくれるので、実装者は最低限のコードを書くだけで品質が担保されたUIを作ることができます。
ただ、アクセシビリティの観点では、Popover APIがセマンティクスに影響を与えることはないようですので、表示する要素がdiv要素など意味を持たない場合は、適切なrole属性を設定する必要があります。

Popover API (Explainer) | Open UI

Semantics and the popover attribute: which role to use when?

JavaScriptを書かなくても動く

HTMLでpopover属性とpopovertarget属性、そしてid属性を設定するだけで動きます！とっても簡単！

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

もちろん、JavaScriptで操作することも可能です！

<div popover id="mypopover">ポップオーバーコンテンツ</div>

const element = document.querySelector("#mypopover");

// 表示
element.showPopover();

// 非表示
element.hidePopover();

// 表示・非表示を切り替え
element.togglePopover();

Popover APIの使いにくいところ

HTMLバリデーションでエラーが出る

HTML Living Standardではpopoverはグローバル属性として定義されているのですが、W3Cのマークアップバリデーターではエラーが出てしまいます。。。

popover属性を使用するとHTMLバリデーションでエラーが発生する

こちらは、バリデーターが仕様に追い付いていない状態なのですが、実務だと関係者へ「このエラーは無視していいやつです」を説明するのがちょっとした手間になってしまいます。
いま有志のかたがIssueを立ててバリデーターを改善しようと頑張っていますので、陰ながら応援しています。

位置調整のスタイリングが難しい

求めるUIやレイアウトによっては、Popover APIの仕様がスタイリングの邪魔になることがあるかもしれません。

例えば、ポップアップメニューを実装する場合、ポップアップするコンテンツはボタンなどのフックとなる要素のすぐ下に表示させたいのですが、Popover APIで表示させた要素はTop Layerに表示されるため、相対的な位置指定ができません。（Top Layer = 親がない ので、topやleftなどでの相対位置指定ができない）
そのため、位置指定はJavaScriptで調整することになります。

▼JavaScriptでの位置調整なし

▼JavaScriptで位置調整

マウスオーバーで表示させるには工夫が必要

ツールチップなど、マウスオーバーした際にポップオーバーを表示させる仕様の機能はすこし工夫が必要になります。

Popover APIは、デフォルトではクリック時にポップオーバーを表示/非表示する機能なので、マウスオーバー時に表示させるようにするには、JavaScriptで制御します。
また、マウスオーバー時にクリックすると勝手に閉じてしまうので…、マウスオーバー時のクリック対策として常に showPopover() させる必要が出てきます。

まとめ

以前は、JavaScriptを駆使して実装していたディスクロージャー（折り畳みUI）も、いまやdetails要素とsummary要素で実装するのが当たり前になったように、ポップオーバーUIもPopover APIを使うのが当たり前になっていくのではないかと考えています。
実務で使う場合はいくつか気を付けるポイントもありますが、コツを掴めば難無く使えますので、今後もPopover APIの出番を見極めつつ実戦投入していこうと思います！