モダンCSS・プラットフォーム
アンカーツールチップ（JSなし）
ボタンにホバー/フォーカスすると、CSS Anchor PositioningとPopoverだけで位置が決まる吹き出しが出る。画面端では自動で上下反転。JS不要。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
実装メモ
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">保存</button>
<span class="atip-tip" style="position-anchor:--a1" role="tooltip">変更を保存します</span>
</div>
<div class="atip-item">
<button class="atip-btn" style="anchor-name:--a2">共有</button>
<span class="atip-tip" style="position-anchor:--a2" role="tooltip">リンクを発行して共有</span>
</div>
<div class="atip-item">
<button class="atip-btn" style="anchor-name:--a3">削除</button>
<span class="atip-tip" style="position-anchor:--a3" role="tooltip">この項目を削除します</span>
</div>
</div>
<p class="atip-note">上端の項目は吹き出しが自動で下側へ反転します</p>