CSS Anchor Positioningを使ってツールチップを実装する

CSS Anchor Positioning とは特定の要素(アンカー)を基準にして、その要素から別の要素の位置を指定できる API です。

絶対位置に配置された要素をページ上の1つ以上の要素（アンカー）に結びつける場合、今まではJavaScriptを使用しないとできませんでしたが、この機能を使うことで、CSSだけでできるようになりました。

Chrome 125でサポートされた実験的な機能で、執筆時点ではサポートブラウザはChromeのみとなっています。

記事内のデモもChromeでのみ動かすことができますのでご了承ください。

CSS Anchor Positioning の使い方

基準となる要素（アンカー）を定義する方法は２種類あります。

• CSSでanchor-name プロパティを使って定義する

<button class="anchor">Anchor</button>

<style>
  .anchor {
    anchor-name: --anchor;
  }
</style>

• HTMLのアンカー要素にid 属性を追加し、その値を固定要素の anchor 属性に指定する。

<button id="anchor">Anchor</button>
<div anchor="anchor">Element</div>

次に、cssのanchor 関数を使って、アンカー要素を基準にした位置を指定します。

calc()を組み合わせると余白を作ることができます。

.element {
 /* アンカー要素を基準にした位置を指定 */ 
 bottom: calc(anchor(--anchor top) + 10px);
 left: anchor(--anchor center);
 transform: translateX(-50%); 
}

上記では、element の bottomはアンカー要素のtopから10px上に位置するように指定しています。element の left はアンカー要素の center にくるよう指定しています。

要素の位置を画面に収まるように自動で調整

CSS Anchor Positioningを使うことで、固定要素の位置が画面外になった場合に別の位置を指定できます。

固定要素にposition-try-optionsプロパティを指定し、フォールバックを使用する@position-try を渡します。

フォールバックの適用順序はposition-try-order プロパティによって決定され、初期値はnormal（左から指定された順に試行）となります。

.element {
 position-anchor: --anchor;
 position: absolute;
 position-try-options: --default, --fallback-1, --fallback-2, --fallback-3;
}

続いて、@position-tryルールの中で、固定要素をどの位置に配置したいのかを定義します。

@position-try --default {
 bottom: calc(anchor(top) + 10px);
 right: anchor(left); 
}

@position-try --fallback-1 {
 top: calc(anchor(bottom) + 10px);
 right: anchor(left);
}

/* 以下省略 */

これによって、画面内に表示される配置が適用されます。

ツールチップの実装

ツールチップとは対象にマウスオーバーした際に表示される注釈や補足情報のことです。

今回はアイコンをホバーした時に説明文を表示する機能を実装します。

CSS Anchor Positioningを使用し、アンカー要素となるアイコンを基準にツールチップの位置を指定します。

1.HTMLを記述する

アイコン要素をicon、ツールチップの要素をtooltipとします。

<button class="icon">?</button>
<div class="tooltip">ツールチップの説明文です。</div>

2.CSSでAnchorを定義する

アイコン要素にanchor-nameを指定し、ツールチップ要素にposition-anchorとposition-try-optionsを指定します。

ツールチップは初期状態で非表示にします。

.icon {
 /* スタイル省略　*/
 anchor-name: --anchor;
}

.tooltip {
  /* スタイル省略　*/
   transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
   transition: 0.3s ease;
  position-anchor: --anchor;
  position: absolute;
  position-try-options: --default, --fallback-1;
}

3.ツールチップを画面内に収める処理を追加する

スクロールした際にもツールチップが画面内に収まるよう、@position-tryルールを追加します。

デフォルトではアイコン上部に表示し、アイコンの位置が画面の上部になった際にアイコン下部に表示されるようにします。

@position-try --default {
  bottom: calc(anchor(top) + 10px);
  left: anchor(center);
}

@position-try --fallback-1 {
  top: calc(anchor(bottom) + 10px);
  left: anchor(center);
}

4.ホバー処理を追加する

隣接セレクタを使い、アイコンをホバーした際にツールチップが表示されるようにします。

.icon:hover + .tooltip {
 opacity: 1;
 visibility: visible;
}

5.完成

以上でツールチップの実装が完了です！

終わりに

CSS Anchor Positioningを使うことで、JavaScriptを使わずに要素の位置を結びつけられるようになり、ツールチップやポップアップといったコンポーネントを簡単に実装できるようになります。

執筆時点ではChromeでのみサポートされている実験的な機能ですが、今後、主要なブラウザで実装されることを期待しましょう！

参考

https://developer.chrome.com/blog/anchor-positioning-api

https://zenn.dev/cybozu_frontend/articles/css-anchor-positioning

https://qiita.com/degudegu2510/items/b124213e05fb7efa328a

https://zenn.dev/catnose99/articles/26bd8dac9ea5268486c8