ツールチップの位置決めに Popper.js はもう要らない — CSS Anchor Positioning 入門

ツールチップやドロップダウンを実装するとき、たいてい Popper.js か Floating UI を入れてきた。「ボタンの下にメニューを表示する」だけのことに、JS ライブラリが必要だった。

CSS Anchor Positioning を使えば、それが純粋な CSS だけで書けるようになる。

Chrome 125・Safari 26・Firefox 147 と、主要ブラウザ全部で対応が揃った。2026 年現在、Baseline 2026 入りしている。

何ができるか

仕組みを一言で言うと「ある要素を別の要素に紐づけて配置する」CSS 機能だ。

従来のポジション指定は「親要素からの相対位置」か「ビューポートからの固定位置」しかなかった。DOM 上で離れた別の要素を基準に配置することはできなかった——だから JS でスクロールのたびに座標を計算する必要があった。

Anchor Positioning はそれを CSS で解決する。

基本の書き方

「ボタンのすぐ下にツールチップを表示する」例。

<button id="trigger">ホバーして</button>
<div id="tooltip">これがツールチップ</div>

#trigger {
  anchor-name: --my-button; /* このボタンをアンカーとして登録 */
}

#tooltip {
  position: absolute;
  position-anchor: --my-button; /* アンカーに紐づける */
  position-area: bottom center; /* アンカーの「下・中央」に配置 */
  margin-top: 8px;
}

これだけ。JS なし。anchor-name でアンカーを名付け、position-anchor で紐づける。position-area で「どこに置くか」を指定する。

position-area は方向の組み合わせで指定する——top left・bottom center・right span-all など。感覚的に書ける。

ビューポートからはみ出しそうなときの処理

Popper.js がよく使われていた理由のひとつが「自動でポジションを調整してくれる」機能。ドロップダウンを下に開こうとしたら画面の端なので上に開く、というやつ。

Anchor Positioning には position-try-fallbacks がある。

#dropdown {
  position: absolute;
  position-anchor: --my-button;
  position-area: bottom span-all;

  position-try-fallbacks:
    top span-all,        /* 下がはみ出したら上に */
    right span-all,      /* それもダメなら右に */
    left span-all;       /* それもダメなら左に */
}

配置を試みて入りきらなければ次の候補へ、というフォールバックが CSS だけで書ける。

Popover API と組み合わせると最強になる

Anchor Positioning は Popover API と一緒に使うと真価を発揮する。Popover API(これも Baseline 2025 入り済み)は「開閉・フォーカス管理・Esc で閉じる・外側クリックで閉じる」をブラウザがやってくれる機能。

<button popovertarget="menu">メニューを開く</button>
<ul id="menu" popover>
  <li>項目1</li>
  <li>項目2</li>
</ul>

button {
  anchor-name: --menu-button;
}

#menu {
  position: absolute;
  position-anchor: --menu-button;
  position-area: bottom span-all;
  margin-top: 4px;
}

開閉ロジック・キーボード操作・アクセシビリティ——全部ブラウザが面倒を見てくれる。JS を一行も書かずにドロップダウンメニューが完成する。

注意点

Interop 2026 の対象なので、細かい挙動に差が残る。 主要ブラウザで動くが、端のケース(スクロールコンテナとの組み合わせなど)は実機テストが必要。

@supports でフォールバックを入れておくのが安全だ。

@supports not (anchor-name: --test) {
  /* 古い環境向けのフォールバック */
}

ただ、基本的なツールチップ・ドロップダウン用途なら今すぐ本番に使える水準にある。

Popper.js を最後に入れたのはいつだったか、ちょっと思い出してみてほしい。ツールチップのためだけに JS ライブラリを入れることに、そろそろ違和感を覚え始めているなら——CSS がその問いに答えを持ってきた。