ツールチップの中央寄せは translate(-50%) ではなくアンカー配置で

どんな時に使う？

left: 50%; transform: translateX(-50%) で中央寄せしたツールチップは、画面端の要素に付けると切れてしまう。CSS アンカー配置を使えば、アンカー（トリガー）要素を基準にして中央揃えでき、端付近ではビューポート内に寄せて表示される。

コード

.thumb {
  anchor-name: --thumb;
}
.tooltip {
  position: absolute;
  position-anchor: --thumb;
  bottom: anchor(top);          /* アンカーの上辺にツールチップの下辺を合わせる */
  justify-self: anchor-center;  /* アンカーの中央に水平揃え */
}

注意点・対応状況

• CSS Anchor Positioning は Chromium 系で先行対応、他ブラウザも対応が進行中。Can I use で要確認。
• さらに確実に画面内に収めたい場合は position-try-fallbacks: flip-block などのフォールバックを併用する。

出典

• @sanyampunia · 2026-09-26