Anchor Positioning

概要

ツールチップやポップオーバーの位置をJavaScriptで計算する必要があった問題を解消する。anchor-name で基準要素を定義し、position-anchor で紐付けるだけで、CSSだけでアンカーに追従する配置が実現できる。

対応ブラウザ

基本構文

.button {
  anchor-name: --my-button;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

実務での使いどころ

• ツールチップ

  ボタンやアイコンに追従するツールチップをJSなしで実装。スクロールしても追従する。

• コンテキストメニュー

  右クリックメニューやドロップダウンを、トリガー要素に対して相対的に配置できる。

注意点

フォールバック戦略

@supports not (anchor-name: --x) {
  .tooltip { display: none; }
  .tooltip.is-visible { display: block; }
}

アクセシビリティ

• ツールチップは role="tooltip" と aria-describedby で紐付ける。
• キーボードフォーカス時にも表示されるよう :focus-visible にも対応する。

参考リンク

• MDN Web Docs — CSS Anchor Positioning
• Can I use — CSS Anchor Positioning