アンカーポジショニング × HTML Popover API

スタック

HTML Popover API（[popover]、popovertarget、popovertargetaction）が 表示・非表示 の挙動を提供します。CSS Anchor Positioning が 配置 を提供します。組み合わせで完全に宣言的なポップオーバーがJavaScriptゼロで実現します。

<button popovertarget="info" class="info-btn">
  情報を表示
</button>

<div popover id="info" class="popover">
  アカウント作成日：2026年3月14日
</div>

.info-btn {
  anchor-name: --info-btn;
}

.popover {
  position: absolute;
  position-anchor: --info-btn;
  position-area: top;
  margin-bottom: 8px;
  position-try-fallbacks: flip-block;

  /* popover デフォルトをリセット */
  inset: auto;
  margin: 0 0 8px 0;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}

無料で得られるもの

Popover API が処理してくれること：

• クリックトリガーで開く
• 別の場所をクリックで閉じる
• Escape キーで閉じる
• フォーカス管理（開いたときポップオーバーにフォーカス移動）
• ライトディスミス vs オートディスミス（popover 属性値で制御）
• トップレイヤーレンダリング（overflow: hidden から自動脱出）

あなたが追加するのはアンカーポジショニングで配置を扱うだけ。結果は、JavaScriptゼロでフルキーボードアクセシブルなツールチップ/ドロップダウン/ポップオーバーです。

popover="auto" vs popover="manual"

<div popover="auto">…</div>     <!-- ライトディスミス；外側クリックで閉じる -->
<div popover="manual">…</div>   <!-- JS または popovertargetaction でしか閉じない -->

ツールチップやドロップダウンには popover（デフォルト "auto"）が適切です。明示的制御が欲しいウィザードやステップバイステップポップオーバーには popover="manual" を使い、popovertargetaction="hide" の閉じるボタンを追加してください。

ブラウザサポート

Popover API：Chrome 114+、Edge 114+、Safari 17+、Firefox 125+。アンカーポジショニング：Chrome 125+、Edge 125+、Safari 26+、Firefox 未対応。つまり 両方の組み合わせ が動くのは Chrome/Edge 125+ と Safari 26+ です — アンカーポジショニング自体が必要とするブラウザと同じです。

Popover API はアンカーポジショニングなしでも動く

中央配置のモーダル風ポップオーバーで表示・非表示だけ必要なら、アンカーポジショニングは全く要りません。デフォルト中央揃えで popover だけ使えば十分です。アンカーポジショニングを追加するのはポップオーバーをトリガーに付けたいときだけです。