DEMO
ボタンにホバー / フォーカスするとツールチップが出ます
CODE
<div class="demo-stage apt-stage">
<div class="apt-row">
<button class="apt-target apt-a" type="button">HOVER ME<span class="apt-tip apt-tip-a">ANCHOR POSITIONED</span></button>
<button class="apt-target apt-b" type="button">OR ME<span class="apt-tip apt-tip-b">POSITION-AREA</span></button>
</div>
<p class="apt-note">ボタンにホバー / フォーカスするとツールチップが出ます</p>
</div>
.apt-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4rem; padding:3rem; background:#0F0F12; min-height:280px; }
.apt-row { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; }
.apt-target {
position:relative; padding:.85rem 1.8rem; border:1px solid rgba(255,255,255,.2); border-radius:999px;
background:#15151A; color:#EDEDED; cursor:pointer;
font-family:'Oswald',sans-serif; font-size:.75rem; letter-spacing:.2em;
transition: border-color .25s ease, color .25s ease;
}
.apt-target:hover, .apt-target:focus-visible { border-color:#E91B89; color:#fff; }
.apt-tip {
position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
white-space:nowrap; padding:.5rem 1rem; border-radius:8px;
background:#E91B89; color:#fff; font-family:'Inter',sans-serif; font-size:.7rem; letter-spacing:.08em;
opacity:0; pointer-events:none;
transition: opacity .22s ease, translate .22s ease;
translate:0 6px;
}
.apt-target:hover .apt-tip, .apt-target:focus-visible .apt-tip { opacity:1; translate:0 0; }
@supports (anchor-name: --a) {
.apt-a { anchor-name: --apt-a; }
.apt-b { anchor-name: --apt-b; }
.apt-tip { position:fixed; left:auto; bottom:auto; transform:none; }
.apt-tip-a { position-anchor: --apt-a; position-area: top center; position-try-fallbacks: bottom center; margin-bottom:10px; }
.apt-tip-b { position-anchor: --apt-b; position-area: bottom center; position-try-fallbacks: top center; margin-top:10px; }
}
.apt-note { font-size:.75rem; color:#7A7A85; letter-spacing:.05em; }
@media (prefers-reduced-motion: reduce) {
.apt-tip { transition-duration:.01ms; }
}
AI PROMPT
CSS Anchor Positioning でツールチップを実装して。基準にする要素に anchor-name: --名前; を宣言し、ツールチップ側で position: fixed; position-anchor: --名前; position-area: top center; と書くと、基準要素の上中央に自動配置される。left/top の手計算も getBoundingClientRect も不要。画面端ではみ出すときは position-try-fallbacks: bottom center; を足すと自動的に反対側へ反転する。重要: 非対応ブラウザでも動くよう、既定は従来の position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) にしておき、@supports (anchor-name: --a) のブロックの中だけで anchor 版に上書きすること。表示切り替えは opacity と translate のトランジションで行い、pointer-events: none を付けて非表示時にクリックを奪わないようにする。アクセシビリティのため :hover だけでなく :focus-visible でも出すこと。 Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift
AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
ある要素を別の要素に紐づけて配置するCSSの仕組みです。基準側に anchor-name、追従側に position-anchor と position-area を書くだけで「上中央」「右下」といった相対配置が宣言的に決まり、画面端でのはみ出しは position-try-fallbacks による自動反転で処理されます。
当サイトの Tooltip は position: absolute と transform による従来型の実装で、親要素との関係が固定されている場合に最短で組める方法です。本ページは、親子関係に縛られず、トップレイヤーの要素からでも追従できる新仕様版という別テーマになります。ドロップダウンやポップオーバーのように「DOM上は離れた場所にあるが視覚的には隣接させたい」場面が本領です。
対応が進行中の機能のため、@supports による分岐と従来型のフォールバックを必ずセットで書いてください。フォールバックを省くと、非対応ブラウザでツールチップが画面の左上に飛びます。
CSS Anchor Positioning は何を解決しますか？
これまでツールチップやドロップダウンの配置は、基準要素の座標をJavaScriptで測り、画面端の判定をして反転させる、という処理が必要でした。Anchor Positioning は「この要素の上中央」という関係をCSSで宣言でき、はみ出し時の代替位置も position-try-fallbacks で書けるため、位置計算のJavaScriptがまるごと不要になります。
Popover API と併用できますか？
できます。むしろ併用が本命の使い方です。Popover API はトップレイヤーに描画するため通常の position: absolute では基準要素に追従できませんが、Anchor Positioning ならトップレイヤーの要素からでも anchor-name で紐づけられます。この2つが揃って初めて、ドロップダウンがCSSとHTMLだけで完成します。
コードは無料で使えますか？
はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。