Chrome, Edge, Safari で使用可能です。Firefox でもサポート予定です。

• https://caniuse.com/?search=popover

popover を指定したコンテンツをポップオーバーとして表示します。ポップオーバーは次のような動作となります。

• ページを開いた時点ではポップオーバーは非可視化される。
• <button> または <input> をクリックすると popovertarget で指定したポップオーバーが開く。
• ポップオーバーは画面の中央に、z-index の値に関わらず最前面に表示される。
• ポップオーバーは常にひとつのみ表示され、新しいポップオーバーが開くと古いポップオーバーは閉じられる。
• ポップオーバーが表示されると、他のコンテンツは不活性化され、ボタンクリックや選択ができなくなる。
• ポップオーバー以外のコンテンツをクリックしたり ESC キーを押すとポップオーバーが閉じる。
• :popover-open でポップオーバーのスタイルを指定できる。
• ::backdrop でポップオーバー以外のスタイルを指定できる。

下記に簡単なサンプルを示します。

*:popover-open {
  padding: 1rem;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 10px 0px #999;
  text-align: center;
}
*::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

<button popovertarget="pop1">Pop</button>
<dialog id="pop1" popover>
  This is a sample dialog.
</dialog>

popovertargetaction には "toggle", "show" または "hide" を指定することができます。何も指定しない場合は "toggle" となり、ボタンを押すたびにポップオーバーの表示と非表示をトグルします。"show" はポップオーバーを表示します。"hide" はポップオーバーを閉じます。

<button popovertarget="pop3" popovertargetaction="show">Pop</button>
<dialog id="pop3" popover>
  This is a sample dialog.<br><br>
  <button popovertarget="pop3" popovertargetaction="hide">Close</button>
</dialog>

popover 属性には "auto" または "manual" を指定することができます。何も指定しない場合は "auto" と見なされます。"manual" を指定すると下記の動作が変わります。

• ポップオーバー以外のコンテンツが非活性化されない。クリックや選択できる。
• ポップオーバー以外の箇所をクリックしても ESC を押してもポップオーバーは閉じない。
• 一度に複数のポップオーバーを表示できる。

下記にサンプルを示します。[Pop] ボタンをもう一度押すことでポップオーバーを閉じることができます。

<button popovertarget="pop2">Pop</button>
<dialog id="pop2" popover="manual">
  This is a sample dialog.
</dialog>

JavaScript の showPopover(), hidePopover() でポップオーバーを制御することもできます。inert 属性を制御することで、popover="manual" の場合でもポップオーバー以外のコンテンツを非活性化することができます。

<div id="main">
  <button id="btn-open">Pop</button>
</div>
<dialog id="pop4" popover="manual">
  This is a sample dialog.<br><br>
  <button id="btn-close">Close</button>
</dialog>
<script>
document.getElementById("btn-open").addEventListener("click", () => {
  document.getElementById("main").inert = true;
  document.getElementById("pop4").showPopover();
});
document.getElementById("btn-close").addEventListener("click", () => {
  document.getElementById("main").inert = false;
  document.getElementById("pop4").hidePopover();
});
</script>