アンカーツールチップ（JSなし）
ボタンにホバー/フォーカスすると、CSS Anchor PositioningとPopoverだけで位置が決まる吹き出しが出る。画面端では自動で上下反転。JS不要。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- アイコン・短いボタンの補足説明
- JS を使わずに吹き出し位置を決めたいとき
- 画面端で上下反転が必要なツールチップ
- 避ける場面
- 操作に必須の情報（ホバーでしか見えない）
- 長文の説明（96px 幅の吹き出し）
- 構成要素
- トリガーボタン
- 吹き出し
- 注釈
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab でボタンへフォーカスすると吹き出しが表示され、離れると消える（focus-visible 時のみ）
- 支援技術
吹き出しは role=tooltip でボタンから aria-describedby で結ぶ。ホバーとキーボードフォーカスの両方で表示。端では自動反転。reduced-motion では即時表示
- 動き
表示 160ms ease、4px 下から浮き上がりつつフェード。ホバーへの軽い応答
デザインの要点
- position-area: block-start center で真上、position-try-fallbacks で下へ反転。JS で座標を測らず端の処理までブラウザが行う
- justify-self: anchor-center で中央揃え。親に position: relative を付けると包含ブロックが親になり、端のシフトが効かず溢れる
- 幅は max-width 96px。端のボタンでも中央配置のまま左右にはみ出さない値で、長文はそもそも tooltip の領分でない
- 表示は :focus-visible にも掛ける。:focus だとクリックのたびに出て邪魔になる
実装メモ
CSS Anchor Positioning（anchor-name / position-anchor / position-area）とホバー・フォーカスだけで作るツールチップで、JavaScriptは一切ありません。position-try-fallbacks により、画面端で吹き出しがはみ出すときは自動で上下反転します。Anchor Positioning は Chrome 125+ / Safari 26+ / Firefox 147+ で利用可（それ以前のブラウザでは position-area 等が無視され、吹き出しがボタン付近に素朴に表示されます）。実運用では簡単なフォールバック位置の指定を添えると安全です。
コード（コピーして使えます）
<div class="atip-row">
<div class="atip-item">
<button class="atip-btn" style="anchor-name:--a1" aria-describedby="atip1">保存</button>
<span class="atip-tip" style="position-anchor:--a1" role="tooltip" id="atip1">変更を保存します</span>
</div>
<div class="atip-item">
<button class="atip-btn" style="anchor-name:--a2" aria-describedby="atip2">共有</button>
<span class="atip-tip" style="position-anchor:--a2" role="tooltip" id="atip2">リンクを発行して共有</span>
</div>
<div class="atip-item">
<button class="atip-btn" style="anchor-name:--a3" aria-describedby="atip3">削除</button>
<span class="atip-tip" style="position-anchor:--a3" role="tooltip" id="atip3">この項目を削除します</span>
</div>
</div>
<p class="atip-note">上端の項目は吹き出しが自動で下側へ反転します</p>