ボタンに追従するツールチップ

基本パターン

ボタンが自分自身をアンカーとして宣言し、兄弟要素のツールチップが position-area: top で真上に配置されます。リサイズ・スクロール・再フローでボタンが動いても、ツールチップは自動的に追従します。

<button class="action">
  変更を保存
</button>
<div class="tooltip" role="tooltip">
  下書きをローカルストレージに保存します。Cmd+S
</div>

.action {
  anchor-name: --save-btn;
}

.tooltip {
  position: absolute;
  position-anchor: --save-btn;
  position-area: top;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #111;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  /* デフォルトでは非表示 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}

.action:hover + .tooltip,
.action:focus-visible + .tooltip {
  opacity: 1;
}

Floating UI に勝る理由

Floating UI のツールチップレシピは約30行のJavaScriptが必要です：computePosition をインポートし、ホバーでスケジュールし、scroll と resize を listen して同期を維持し、アンマウント時にクリーンアップ。上のCSS-onlyバージョンは14行のスタイルシートだけで、ネイティブのブラウザレイアウトを使うので厳密に高速・小サイズ・アクセシブルです（ブラウザがRTLを自動処理してくれます。Floating UI ではオプトインが必要）。

8px のギャップ

ツールチップの margin-bottom: 8px がトリガーとツールチップの間に視覚的な隙間を作ります。Floating UI の offset({ mainAxis: 8 }) ミドルウェアと同じ役割で、アンカーポジショニングではボックスモデルだけで実現できます。

アクセシビリティ

role="tooltip" と aria-describedby でボタンとツールチップを紐づけてください。アンカーポジショニングは純粋に視覚的な機能なので、アクセシビリティのセマンティクスはマークアップ側で表現する必要があります。