Popover API + Dialog

Popover APIがChrome114/Edge114にExperimentalとして実装された。

Popover APIはセマンティクスを提供しない（あくまで属性のひとつ）。

Popover API

<button popovertarget="my-popover">Popover</button>

<div id="my-popover" popover>Popover Content</div>

• Popover Contentの外側をクリックすると閉じられる
• JavaScriptで操作するときはtogglePopoverを使う
• 用途: トースト通知、フォームのサジェストなど

Popover API + Dialog

<button popovertarget="my-dialog">Dialog</button>

<dialog id="my-dialog" popover>
  Dialog
  <button
    popovertarget="my-dialog"
    popovertargetaction="hide"
  >Close</button>
</dialog>

追記: 2024-04-25

Chrome114、Edge114に加え、Safari 17.0とFirefox 125にも実装されたことで、全主要ブラウザで利用可能になった。