先日、Firefox 125 （125.0.1） が正式にリリースされましたが、このバージョンで、HTML の popover 属性、および popovertarget 属性、popovertargetaction 属性、CSS の :popover-open 疑似クラス、::backdrop 疑似要素の popover 対応といった Popover API 関連のサポートが行われました。
Firefox 以外のモダンブラウザではすでにサポートが完了していましたので、これですべてのブラウザで使用できる状態になったといえます。
個人的に画面上に何かしらポップアップして表示するような UI はあんまり好きじゃないんですが、まぁ個人の好き嫌いは置いておいて、そういう UI の実装がとても簡単になるという点ではめでたいんじゃないでしょうか。
popover 属性とは
popover 属性は HTML のグローバル属性で、ある要素をポップオーバー要素であると指定するために使用します （詳しい説明は私が別途更新している HTML タグリファレンスに書いています）。
ポップアップする要素というと、dialog 要素があるじゃんと思われると思いますが、dialog 要素は、ダイアログボックス（ユーザーに情報を提示し、必要に応じて応答してもらうための特殊ウィンドウの一種）を表示するためのものです。つまり、（表示形態として） ポップアップさせたいからといって、ダイアログでないもの、言い換えれば特にユーザーとの対話を必要としないもの、例えばコンテキストメニューやツールチップを dialog 要素で実装することは望ましくありません。
そういう場合は、popover 属性を使用するのが妥当ですので、適切に使い分けられるとよいと思います。
関連する属性
popover 属性に関連する属性として popovertarget 属性と、popovertargetaction 属性が使用されます。
これら 2 つの属性は、button 要素、および input 要素の一部 （<input type="button">、<input type="submit">、<input type="image">、<input type="reset">） にのみ使用できる属性ですが、例えば最低限、下記のように HTML を記述することで、JavaScript などを使用することなく、ポップオーバーする UI を実装できます。
<button popovertarget="menu">メインメニューを開く</button>
<nav id="menu" popover="auto">
<h2>メインメニュー</h2>
<ul>
<li><a href="#">メニュー01</a>
<li><a href="#">メニュー02</a>
<li><a href="#">メニュー03</a>
</ul>
<button popovertarget="menu" popovertargetaction="hide" aria-label="メインメニューを閉じる">×</button>
</nav>
popover 属性には、auto、manual の 2 つの属性値が指定できますが、初期値は auto です。
上の例では、popover="auto" と記述していますが、初期値が auto なので、popover と記述しても同じ意味になります。
auto が指定されたポップオーバー要素は排他的処理、要するに、1 つのポップオーバー要素が開いたら、他は閉じるという挙動になります （ネストされたポップオーバー要素は除外）。
通常は auto の動作で問題ないと思いますが、UI の都合で特定のポップオーバー要素を開いたまま他のポップオーバー要素も表示しないといけない場合は manual 値が使用できます。
popovertarget 属性値には、対象とするポップオーバー要素の id 属性値を指定します。また、popovertargetaction 属性は、ポップオーバー要素をどのように操作するか、簡単に言えば、ボタンを操作したときに、ポップオーバー要素がどういう風に動作して欲しいのか、を指定します。
popovertargetaction 属性に指定できるのは、下記の値で、初期値は toggle ですから、ボタンを押すたびにポップオーバー要素が表示されたり、非表示になったりとトグル動作すればよいのであれば、特にこの属性を指定しなくても問題ありません。
hide
表示されているポップオーバー要素を非表示にします。ターゲットとなるポップオーバー要素がすでに非表示の場合は何もしません。show
非表示のポップオーバー要素を表示します。ターゲットとなるポップオーバー要素がすでに表示されている場合は何もしません。toggle
既定値。ポップオーバー要素の表示・非表示を切り替える（トグルする）ボタンとします。
逆に、「開く」 あるいは 「閉じる」 専用ボタンとしたい場合は、hide や show 値を popovertargetaction 属性で指定する必要があります。
関連する CSS
ポップオーバー要素のうち、開いているものについては、:popover-open 疑似クラスによってスタイルを指定できます。また、::backdrop 疑似要素が使用できますので、ポップオーバー要素が開いている状態での背景の指定も可能です。
簡単な例としては、下記のような指定で背景を指定できます。
:popover-open::backdrop {
background-color: rgb(0 0 0 / 75%);
}
動作サンプル
下記に、実際に動作するサンプルを用意したので対応しているブラウザで操作してみてください。
