DEMO
CODE
<div class="demo-stage"><span class="tt" data-tip="保存せずに変更を破棄します">DISCARD</span><span class="tt" data-tip="クリップボードにコピーします">COPY</span></div>
.demo-stage { display:flex; align-items:center; justify-content:center; gap:2rem; padding:4.5rem 2rem; }
.tt { position:relative; padding:.8rem 1.5rem; background:#1A1A1A; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; border-radius:7px; cursor:pointer; font-size:.9rem; }
.tt::before { content:attr(data-tip); position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(7px); background:#E91B89; color:#fff; padding:.55rem 1rem; border-radius:7px; font-size:.76rem; white-space:nowrap; font-family:'Inter',sans-serif; letter-spacing:0; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.tt::after { content:""; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(7px); border:6px solid transparent; border-top-color:#E91B89; opacity:0; transition:opacity .25s ease, transform .25s ease; }
.tt:hover::before, .tt:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
AI PROMPT
ホバーで出るツールチップをCSSのみで作って。data-tip属性の文字を::beforeにcontent:attr(data-tip)で表示。位置はbottom:calc(100%+12px)で要素の上、left:50%+translateX(-50%)で中央。::afterで下向き三角の吹き出し。初期opacity:0+translateYで少し下、ホバーでopacity:1+translateY(0)へ.25s。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
ホバーで吹き出しの補足情報が現れるツールチップ。アイコン・専門用語の説明に。CSSのみで実装。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。