脱JavaScript！CSS Anchor Positioningでツールチップとポップアップを1行配置する新常識

📖 推定読了時間：約6分

Webサイトで「ボタンの上にマウスを乗せたらツールチップを出す」「アイコンをクリックしたらドロップダウンメニューを吸い付くように表示する」……こんな当たり前のUIを実装するために、皆さんはどれほどの苦労をしてきたでしょうか。親要素のoverflow: hiddenで端が欠け、z-indexの数字競争に巻き込まれ、結局Popper.jsやFloating UIといったJavaScriptライブラリを読み込んで、スクロールやリサイズのたびに重たい座標計算（getBoundingClientRect()）を回す……。

そんな「Webフロントエンド20年の座標計算地獄」に終止符を打つ超大型Web標準が、主要ブラウザで実装が進む「CSS Anchor Positioning API（アンカーポジショニング）」です。JavaScriptを1行も書くことなく、純粋なCSSだけで要素同士を磁石のように吸着させ、画面端での自動反転までやってのける驚異の新仕様を完全解剖します！

1. なぜ今までツールチップの実装はあんなに面倒だったのか？

ボタンのすぐ隣にツールチップを表示したいだけなのに、HTMLの構造上はボタンの子要素として配置すると、親コンテナがoverflow: hiddenやoverflow: autoを持っていた瞬間に見切れて非表示になってしまいます。

これを避けるため、フロントエンド開発者はツールチップをDOMツリーの最下部（<body>直下）に逃がし、JavaScriptで「ボタンの現在座標」をリアルタイム監視してtopとleftのインラインスタイルをミリ秒単位で書き換えるという、極めて泥臭いハックを強いられていました。

• ⚠️メインスレッドのジャンク（カクつき）：スクロール時にJSが座標再計算を連発し、フレームレートが低下する。
• ⚠️バンドルサイズの肥大化：単純なツールチップやセレクトボックスのためだけに数十KBの外部JSライブラリを抱え込む。
• ⚠️z-index地獄：スタッキングコンテキストの迷宮で、モーダルやヘッダーの下にツールチップが潜り込む。

Web標準の進化に追従し、ユーザー体験と保守性を両立したUIを設計するには、WebフロントエンドUI/UX・Webアクセシビリティ実践入門書などで最新セマンティクスとブラウザ標準機能の組み合わせパターンを体系的に押さえておくことが重要です。

2. 魔法の2大プロパティ：anchor-nameとposition-anchor

CSS Anchor Positioningの仕組みは驚くほどエレガントです。やるべきことは「基準となる要素（アンカー）」に名前をつけ、「浮遊させる要素（ターゲット）」からその名前を参照するだけです。

これらを組み合わせた実際のコードがこちらです。

/* 1. 基準となるボタン */
.target-button {
  anchor-name: --save-button;
}

/* 2. 追従するツールチップ（DOM上の配置場所はどこでもOK！） */
.tooltip {
  position: fixed;
  position-anchor: --save-button;
  
  /* ボタンの下端から8px離した位置に配置 */
  top: calc(anchor(bottom) + 8px);
  /* ボタンの水平中央に揃える */
  justify-self: anchor-center;
}

たったこれだけで、ボタンが画面のどこにスクロールしようとも、ブラウザの描画コンポジタースレッドが60fps/120fpsでピタッと追従させてくれます。JavaScriptは1バイトも使っていません！

3. 画面端で自動反転！position-try-fallbacksの衝撃

「でも、画面の一番下にあるボタンをクリックしたらツールチップが見切れてしまうのでは？」と心配する方に朗報です。Anchor Positioningの真骨頂は、「画面外にはみ出たら自動で向きを変える」機能まで標準装備している点です。

.tooltip {
  position: fixed;
  position-anchor: --save-button;
  top: calc(anchor(bottom) + 8px);
  
  /* 画面下端にはみ出る場合、自動的にボタンの上側にフリップする！ */
  position-try-fallbacks: flip-block;
}

position-try-fallbacks: flip-block;と宣言するだけで、ブラウザが「あ、下側に十分な余白がないな」と検知した瞬間に、自動で上側（top: auto; bottom: calc(anchor(top) + 8px);）へと反転表示してくれます。

HTML5から最新のWeb標準仕様までの進化の文脈を網羅的に把握したい開発者には、モダンHTML5次世代Web標準仕様解説書やモダンWebタイポグラフィ・CSSデザイン設計実践ガイドを手元に置いておくことで、最新プロパティを活用した洗練されたUI設計が一気に加速します。

4. 導入時の注意点：ブラウザ対応とプログレッシブエンハンスメント

ここで現時点での実務導入における重要注意点があります。

CSS Anchor Positioning APIは、Chromium系ブラウザ（Chrome 125以降）で先行してデフォルト有効化され、SafariやFirefoxでも急ピッチで実装が進められています。全ブラウザで完全にBaseline化されるまでの過渡期においては、以下のように@supportsを用いて判定を行い、未対応環境では従来の配置や軽量Polyfillを充てる設計が実務上最も安全です。

@supports (anchor-name: --test) {
  /* Anchor Positioningに対応したモダンブラウザ用の快適スタイル */
  .tooltip { position-anchor: --my-btn; ... }
}

まとめ

CSS Anchor Positioning APIは、CSS GridやFlexboxに匹敵する、Webレイアウトの歴史における巨大なマイルストーンです。重たいJSライブラリによるパフォーマンス劣化や、親要素のクリッピングによる表示崩れに悩まされる時代は完全に過去のものとなります。

ぜひ最新のChromeブラウザを開いて、CSSだけでツールチップが吸い付く快感を自身のコードで試してみてください。一度この身軽さを味わったら、もう昔のJavaScript実装には二度と戻れなくなるはずです！