Chrome 114から<a href="https://momdo.github.io/html/popover.html" target="_blank" rel="nofollow noopener noreferrer">Popover API</a>がサポートされました。 
Popover APIは「トースター」などのコンテンツ上に別のコンテンツを表示しユーザーをサポートするようなコンポーネントをjavascriptを使うことなく実装できる便利な機能です。 
基本的な使い方から<code>dialog</code>との使い分けまで調べたのでまとめたいと思います。
<h2 id="%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 基本的な使い方</h2>
Popoverを表示する方法は2つあります。
<ol>
<li>popover属性とpopovertarget属性を使用する方法</li>
</ol>
以下のように、ポップオーバーで表示したい要素に対して <code>popover</code>と<code>id</code>を指定、トリガーとする<code>&lt;button&gt;</code>(もしくは<code>&lt;input&gt;</code>)に対して、<code>popovertarget</code>で<code>popover</code>で指定した<code>id</code>指定します。 
これでボタンを押せば表示できます。
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx">&lt;div id="popover" popover&gt;contents&lt;/div&gt;
&lt;button popovertarget="popover"&gt;toggle Popover&lt;/button&gt;
</code></pre></div><ol start="2">
<li>
<code>HTMLElement.togglePopover() || showPopover()</code>を使用する方法</li>
</ol>
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx"># html
&lt;div id="popover" popover&gt;contents&lt;/div&gt;

# js
const popover = document.getElementById("popover");
document.addEventListener("keydown", (event) =&gt; {
	if (event.key === "j") {
		popover.togglePopover();
 // popover.showPopover()
	}
}); 
</code></pre></div><h3 id="html%E5%B1%9E%E6%80%A7">
<a class="header-anchor-link" href="#html%E5%B1%9E%E6%80%A7" aria-hidden="true"></a> HTML属性</h3>
<h4 id="popover">
<a class="header-anchor-link" href="#popover" aria-hidden="true"></a> popover</h4>
<code>popover</code>を指定された要素は、デフォルトで非表示になり、上記の使い方で挙げた、いずれかの方法で表示することが出来ます。表示された要素は、他の要素よりも上のレイヤーで表示されるためz-indexに左右されることなく表示されます。
この<code>popover</code>には <code>auto</code>と<code>manual</code>を渡すことができ、違いは以下です。
<table>
<thead>
<tr>
<th>特徴</th>
<th>auto</th>
<th>manual</th>
</tr>
</thead>
<tbody>
<tr>
<td>ESCで閉じる</td>
<td>できる</td>
<td>できない</td>
</tr>
<tr>
<td>ポップオーバー外をクリックすると閉じる</td>
<td>できる</td>
<td>できない</td>
</tr>
<tr>
<td>複数のpopover要素を表示</td>
<td>できない</td>
<td>できる</td>
</tr>
</tbody>
</table>
<h4 id="popovertarget">
<a class="header-anchor-link" href="#popovertarget" aria-hidden="true"></a> popovertarget</h4>
<code>&lt;button&gt;</code>(もしくは<code>&lt;input&gt;</code>)に対して<code>popovertarget="popoverid"</code>のように<code>popover</code>要素の<code>id</code>を指定することで、<code>popover</code>要素を制御する要素にすることができます。
<h4 id="popovertargetaction">
<a class="header-anchor-link" href="#popovertargetaction" aria-hidden="true"></a> popovertargetaction</h4>
<code>popovertarget</code>を指定した<code>&lt;button&gt;</code>(もしくは<code>&lt;input&gt;</code>)に対して指定することで<code>popover</code>要素に対する動作を指定することが出来ます。指定できる値は以下の3つです。
<ol>
<li>
<code>show</code> =&gt; popover要素を表示する</li>
<li>
<code>hide</code> =&gt; popover要素を非表示する</li>
<li>
<code>toggle</code> =&gt;popover要素の表示・非表示を切り替える。デフォルトでは、この<code>toggle</code>になる</li>
</ol>
<h3 id="css">
<a class="header-anchor-link" href="#css" aria-hidden="true"></a> CSS</h3>
<h4 id="backdrop">
<a class="header-anchor-link" href="#backdrop" aria-hidden="true"></a> backdrop</h4>
擬似要素の <code>::backdrop</code> を使うことで、popover要素の背景のスタイルを当てることができます。 
(背景を暗くしたり、ぼかしたりなど)
<h4 id="popover-open">
<a class="header-anchor-link" href="#popover-open" aria-hidden="true"></a> popover-open</h4>
擬似要素の<code>popover-open</code>を使うことで、popover要素が表示されている時のみ適用されるスタイルを当てることができます。
基本的な使い方は、こんな感じです。
<h2 id="popover-api-%E3%81%A8-%3Cdialog%3E">
<a class="header-anchor-link" href="#popover-api-%E3%81%A8-%3Cdialog%3E" aria-hidden="true"></a> Popover API と <code>&lt;dialog&gt;</code>
</h2>
Popover APIを初めて見た時「めっちゃ便利じゃん！」と思った一方で、「<code>&lt;dialog&gt;</code>でも似たようなこと出来るじゃん？」とも思いました。そこで、Popover APIと <code>&lt;dialog&gt;</code>の使い分けを調べてみました。
この２つを使い分ける上で、モーダルとモードレスという概念を理解する必要があると思ったので簡単に説明します。 
ソシオメディアさんによると、この2つの説明は以下の通りです。
モーダル
<blockquote>
モードがある状態。つまり、システムが特定の機能の使用に制限された状態。ユーザーが自由に操作を行えなくなることと、モード別に機能の意味や振る舞いが変化することから、ユーザーインターフェースのデザインでは、できる限りモードを設けないほうがよいとされる。 
<a href="https://www.sociomedia.co.jp/1320" target="_blank" rel="nofollow noopener noreferrer">https://www.sociomedia.co.jp/1320</a>
</blockquote>
モードレス
<blockquote>
モードがない状態。ユーザーインターフェースをデザインする際に目指すべき状態。状況に依存した機能制限がなく、自由な手順でタスクを進行することができ、かつ特定の操作がシステムによって常に一定に解釈される状態。 
<a href="https://www.sociomedia.co.jp/326" target="_blank" rel="nofollow noopener noreferrer">https://www.sociomedia.co.jp/326</a>
</blockquote>
簡単にまとめると 
モーダルは「モードがある状態」なので、ユーザーに制限がかかります。 
反対にモードレスは「モードがない状態」なので、ユーザーは次の動作を自由に決められます。
これを前提とすると、Popover APIと <code>&lt;dialog&gt;</code>の使い分けはシンプルに以下になりそうです。
モーダル ⇒ <code>&lt;dialog&gt;</code> 
モードレス ⇒ <code>Popover API</code>
<h3 id="%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB">
<a class="header-anchor-link" href="#%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB" aria-hidden="true"></a> モーダル</h3>
<code>&lt;dialog&gt;</code> は <code>showModal()</code> を使用することで、以下のようにモーダルで必要な機能がデフォルトで搭載されます。
<ol>
<li>開いた時にdialog要素内のフォーカス可能な最初の要素にフォーカスが自動でセット</li>
<li>ESCやdialog要素外のクリックで閉じる</li>
<li>
<code>aria-modal=true</code> になり、支援技術にモーダルであることが伝えられる</li>
<li>
<code>::backdrop</code>擬似要素を使用してスタイルを当てられる</li>
</ol>
Popover APIでもモーダルのようなUIを実装することは可能ですが、↑の1や3はありませんし、モーダルの外が非活性にもなりません(クリックすると閉じますが、非活性にはなってません)
そのためモーダルを実装する時は<code>&lt;dialog&gt;</code>を使うのが適切だと言えそうです。
<h3 id="%E3%83%A2%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%A2%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B9" aria-hidden="true"></a> モードレス</h3>
<code>&lt;dialog&gt;</code>は<code>show()</code>を使用することで、モードレスなUIを実装することもできます。
以下に<code>Popover API</code>とモードレスな<code>&lt;dialog&gt;</code>の違いを表形式でまとめました。
<table>
<thead>
<tr>
<th>特徴</th>
<th>Popover API</th>
<th>非モーダルな &lt;dialog&gt;</th>
</tr>
</thead>
<tbody>
<tr>
<td>トップレベルの表示</td>
<td>はい</td>
<td>いいえ</td>
</tr>
<tr>
<td>CSSによる表示/非表示のアニメーション</td>
<td>サポートされている</td>
<td>サポートされていない</td>
</tr>
<tr>
<td>表示/非表示のトランジションに必要なJSの依存性</td>
<td>いいえ</td>
<td>はい</td>
</tr>
<tr>
<td>宣言的なHTMLによる表示/非表示の切り替え</td>
<td>サポートされている</td>
<td>サポートされていない</td>
</tr>
<tr>
<td>発火するイベント</td>
<td>「popovershow」と「popoverhide」が発火する</td>
<td>表示時のイベントはなく、「cancel」と「close」のイベントが発火する</td>
</tr>
<tr>
<td>使用する要素の種類</td>
<td>HTML内の最も意味的に関連する要素に適用できる（&lt;dialog popover&gt;など）</td>
<td>&lt;dialog&gt;要素にのみ適用可能</td>
</tr>
<tr>
<td>ページコンテンツの上に描画されるかどうか</td>
<td>はい</td>
<td>いいえ</td>
</tr>
<tr>
<td>role属性の値</td>
<td>N/A</td>
<td>role=dialog</td>
</tr>
</tbody>
</table>
この表は以下を参考にChatGPT大先生に作ってもらいました。 
<iframe id="zenn-embedded__74d324ba1618a" src="https://embed.zenn.studio/card#zenn-embedded__74d324ba1618a" data-content="https%3A%2F%2Fopen-ui.org%2Fcomponents%2Fpopover.research.explainer%2F%23popover-vs-dialog" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://open-ui.org/components/popover.research.explainer/#popover-vs-dialog" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://open-ui.org/components/popover.research.explainer/#popover-vs-dialog</a>
この表からわかるとおり、<code>Popover API</code>は、<code>&lt;dialog&gt;</code>を使ってモードレスなUIを実装するよりも多くのことをサポートしてくれていたり、javascriptを使わずに出来ることも多いため、モードレスなUIは<code>Popover API</code>を使った方が良さそうです。
<h3 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h3>
PopoverAPIについて調べたことをまとめてみました。 
今回、記事に書いたこと以外にもネストさせて表示させる方法などもあったりして、PopoverAPIは、まだまだサポートされていないブラウザも多いですが、「トースター」「ツールチップ」「アクションメニュー」など多くの場面で使えるので、積極的に使っていきたいです。
参考にさせていただいた記事
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Popover_API" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/API/Popover_API</a></li>
<li><a href="https://zenn.dev/yusukehirao/articles/popover-api-and-attributes" target="_blank">https://zenn.dev/yusukehirao/articles/popover-api-and-attributes</a></li>
<li><a href="https://open-ui.org/components/popover.research.explainer/" target="_blank" rel="nofollow noopener noreferrer">https://open-ui.org/components/popover.research.explainer/</a></li>
<li><a href="https://developer.chrome.com/blog/introducing-popover-api/" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/introducing-popover-api/</a></li>
<li><a href="https://www.sociomedia.co.jp/1320" target="_blank" rel="nofollow noopener noreferrer">https://www.sociomedia.co.jp/1320</a></li>
<li><a href="https://www.sociomedia.co.jp/326" target="_blank" rel="nofollow noopener noreferrer">https://www.sociomedia.co.jp/326</a></li>
</ul>

Popover API さわってみた

Discussion