Popover API

概要

モーダル・ドロップダウン・ツールチップなどのレイヤーUIはこれまで全てJSで実装する必要があった。popover 属性を使うと、HTMLとCSSだけでトグル可能なポップオーバーを実装でき、アクセシビリティも自動的に確保される。

対応ブラウザ

基本構文

<button popovertarget="my-menu">メニューを開く</button>

<div id="my-menu" popover>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
  </ul>
</div>

[popover] {
  border: none;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}

[popover]::backdrop {
  background: rgba(0,0,0,.3);
}

実務での使いどころ

• ナビゲーションメニュー

  ハンバーガーメニューやドロップダウンナビゲーション。JSゼロで開閉が実現できる。

• 情報パネル・ツールチップ

  アイコンをクリックしたときに表示される補足情報パネル。backdrop クリックで自動的に閉じる。

注意点

アクセシビリティ

• popovertarget を使うとフォーカス管理・aria-expanded・Escape キーでの閉鎖が自動的に処理される。
• 手動でJS実装する場合と比較して、アクセシビリティ対応コストが大幅に下がる。

参考リンク

• MDN Web Docs — Popover API
• Can I use — Popover API