オーバーレイメニュー、モーダルウィンドウのようなコンテンツの上に乗せて表示する表現をjsを使わなくても簡易に実装できるAPIです。
<!-- これだけ！！ -->
<button popovertarget="MyPopover">
ポップオーバーを表示・非表示
<button>
<div id="MyPopover" popover>
ポップオーバーだよ
</div>
2023年12月現在、最新のChrome, Safariで使用できますが、Safariは2023年9月にリリースされたバージョン17以降のため、今すぐ実践で使うのは少し難しい。
できること
htmlだけで十分な表示・非表示の制御ができる
こういう表示・非表示のUIは、ポップオーバー要素以外のクリックやESCキーによる非表示等をちゃんと作り込もうとするとやや面倒ですが、以下のような最低限の実装だけで要素以外のクリックとESCキーによる非表示が実装されます。
See the Pen Hello, popover by ksk1015 (@ksk1015) on CodePen.
なお、表示だけのボタン、非表示だけのボタン、表示非表示のボタンは以下のようになります
See the Pen Popover API - popovertargetaction by ksk1015 (@ksk1015) on CodePen.
z-indexと関係なく、ページ最上部に表示できる
要素の重なり合いの制御はzindexのみでしたが、Popover APIで表示した要素はz-indexに関係なく最上部に表示されます。
See the Pen Popover要素は最強z-indexより上に表示される by ksk1015 (@ksk1015) on CodePen.
普通にスタイリングできる
popover属性はどんな要素に対してもあてることができて、スタイリングも普通にできます。
See the Pen Popover要素をスタイリング by ksk1015 (@ksk1015) on CodePen.
ポップオーバー要素の外側の背景をcssだけで調整できる
ポップオーバーな表現は、下のコンテンツと異なるレイヤーであることをわかりやすくするために、半透明の要素を加えたりしますが、そのための要素をわざわざ加えずに、::backdrop疑似要素のスタイルを調整できます。
See the Pen Untitled by ksk1015 (@ksk1015) on CodePen.
アニメーション
ポップオーバー要素はCSSでアニメーションを付けることができます。
See the Pen Popover アニメーション by ksk1015 (@ksk1015) on CodePen.
↑のデモは表示時のみのアニメーションですが:popover-open疑似クラスを利用して非表示時のアニメーションも付けることもできそうだけど、時間ないので割愛。
制御ボタンの状態変化
ポップオーバー要素を制御するボタンに対して、表示中は押されてる感を演出したり、閉じる的な見た目にするのも、:popover-open疑似クラスとhasセレクターを使って実装できます。
See the Pen Popover 制御ボタンの状態変化 by ksk1015 (@ksk1015) on CodePen.
jsが必要なところ
初期状態であらかじめ表示
たとえばdetails要素はopen属性によって表示非表示が制御されてるので、open属性であらかじめ展開されてるdetails要素を作れますが、Popover APIにはそういう仕組になってないのでHTMLElement.showPopover()を使って表示してあげます。
See the Pen Popover - あらかじめ表示 by ksk1015 (@ksk1015) on CodePen.
ポップオーバー以外の要素の非活性
ポップオーバー以外のリンクやボタンをクリックできなくしたり、フォーカスが当たらないようにするにはjsを使う必要があります。
See the Pen Hello, popover by ksk1015 (@ksk1015) on CodePen.