「この言葉の意味は？」「このボタンを押すとどうなる？」——ユーザーのそんな小さな疑問に応えるのが、ツールチップとポップオーバーです。
JSライブラリに頼らなくても、CSSだけで美しく動くツールチップとポップオーバーを実装できます。
1. 基本のツールチップ（上方向）
ボタンやアイコンにカーソルを乗せると、上にフワッと説明文が表示されるパターン。ホバーしてみてください。
入力内容を送信します
この操作は取り消せません
HTML
<div class="tooltip-wrap">
<button class="tooltip-btn">送信する</button>
<div class="tooltip">入力内容を送信します</div>
</div>
<div class="tooltip-wrap">
<button class="tooltip-btn" style="background:var(--color-text-dark)">削除する</button>
<div class="tooltip">この操作は取り消せません</div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.tooltip-btn {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #1A1A1A;
color: #fff;
font-size: 0.75rem;
padding: 6px 12px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 三角形の矢印 */
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1A1A1A;
}
.tooltip-wrap:hover .tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
2. data属性を使った軽量ツールチップ
テキスト内の特定の単語にツールチップを付けたい場合、HTMLの data-tip 属性とCSSの ::after 擬似要素だけで実装できます。
Web制作ではSEOとLCPの最適化が重要です。
HTML
<p>Web制作では<span data-tip="Search Engine Optimization：検索エンジン最適化">SEO</span>と<span data-tip="Largest Contentful Paint：最大コンテンツの描画">LCP</span>の最適化が重要です。</p>
CSS
/* HTML: <span data-tip="説明文">用語</span> */
[data-tip] {
position: relative;
cursor: help;
border-bottom: 1px dashed #9A9794;
}
[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #1A1A1A;
color: #fff;
font-size: 0.7rem;
padding: 4px 10px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
transition: all 0.2s;
}
[data-tip]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
3. ポップオーバー（:focus-within）
クリックで開く、カード型の情報表示。:focus-within を使えばJSなしで実装できます。下のボタンをクリックしてみてください。
Web制作プラン
企画〜デザイン〜実装まで一貫対応。ブランドの「伝わる」を最大化するWebサイトを制作します。
HTML
<div class="popover-wrap">
<button class="popover-trigger" tabindex="0">詳しく見る ▾</button>
<div class="popover">
<p class="popover__title">Web制作プラン</p>
<p class="popover__text">企画〜デザイン〜実装まで一貫対応。ブランドの「伝わる」を最大化するWebサイトを制作します。</p>
<button class="popover__btn">お問い合わせ</button>
</div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.popover__btn {
/* 本体のスタイル */
}
.popover-trigger {
/* 本体のスタイル */
}
.popover__title {
/* 本体のスタイル */
}
.popover__text {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
.popover-wrap { position: relative; }
.popover {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) scale(0.95);
background: #fff;
border: 1px solid #EAEAEA;
border-radius: 12px;
padding: 16px;
width: 240px;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* :focus-within で開閉制御 */
.popover-wrap:focus-within .popover {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
}
💡 ポイント：
:focus-within はコンテナ内のいずれかの要素がフォーカスを持っている時に適用されます。ボタンに tabindex="0" を追加するのを忘れずに。
まとめ
- ツールチップ →
:hover+opacity+translateYで実装 - data属性方式 →
::after+attr()で軽量実装 - ポップオーバー →
:focus-withinでクリック開閉
💡 ツタワルの制作では：「ユーザーが迷わない」UI設計を徹底しています。ツールチップやポップオーバーは、情報過多を避けつつ必要な情報を届けるための重要なパーツです。