アンカーポジショニング付きのポップオーバー

ツールチップとの違い

ツールチップはホバー・フォーカスで表示される受動的なラベルですが、ポップオーバーはクリックで開きアクション・フォーム・リッチコンテンツを含むインタラクティブなパネルです。アンカーポジショニングは両方で同じように動きますが、ポップオーバーには通常以下が必要です：

1. 大きめのギャップ（4〜8px ではなく 8〜16px）
2. アンカーを指し示す矢印（どのアンカーのポップオーバーかを明示）
3. 堅牢なフォールバック（ポップオーバーは大きめではみ出しやすい）

.popover-trigger {
  anchor-name: --popover-1;
}

.popover {
  position: absolute;
  position-anchor: --popover-1;
  position-area: bottom;
  margin-top: 12px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 16px;
  width: 280px;

  position-try-fallbacks: flip-block;
}

/* アンカーを指し示す矢印（上向き） */
.popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

矢印の自動反転

flip-block が発動してポップオーバーが上向きに開いたら、矢印も反転すべきです。@position-try 名前付きフォールバックがすべてのブラウザで使えるようになるまで、最もクリーンなのは矢印を2つ（上向き・下向き）用意し、:has() セレクターまたはJSで設定する data 属性で条件分岐することです。多くのアプリでは、稀なオーバーフロー時の視覚的不整合は許容範囲です。

幅戦略

ポップオーバーの幅パターン3つ：

1. 固定幅（上記）：width: 280px — 予測可能、デザインシステムでよく使われる。
2. アンカーに合わせる：min-width: anchor-size(width) — 「トリガーが下に展開する」感覚。
3. コンテンツ依存：min-width: 240px; max-width: 480px — 可変コンテンツ向け。