Design Pattern

ツールチップ

ツールチップは、要素にホバーまたはフォーカスしたときに短い補足情報を表示する UI パターンです。似た概念の Toggletip と混同しやすいため、表示トリガーと含めてよい内容を区別して設計する必要があります。

難易度: 中級カテゴリ: 情報表示

いつ使う / 使わない

使うべきとき

アイコンボタンなどに短い補足説明を付けたい場合
略語や専門用語の簡潔な説明を見せたい場合
フォーム入力のヒントを補助的に出したい場合

使わないべきとき

重要な情報を伝える場合 → 常時表示するテキストを使う
リンクやボタンなどインタラクティブ要素を含めたい場合 → ポップオーバーやダイアログを使う
ホバー前提になりやすいモバイル中心の UI の場合

構造（Anatomy）

1 トリガー要素（ホバー / フォーカス対象）

2 ツールチップ本体（補足説明テキスト）

3 矢印（オプション）

トリガー要素 — aria-describedby でツールチップを参照する
ツールチップ本体 — role="tooltip" を持つ短い補足テキスト領域
矢印 — トリガーとの関係を視覚的に示す補助要素

HTML 構造

ツールチップと Toggletip の違い

ツールチップ — ホバーまたはフォーカスで表示する。補足説明向け
Toggletip — クリックやキー操作で表示を切り替える。状態変化の通知も必要

重要なポイント

トリガーはフォーカス可能な要素にする
ツールチップ内にインタラクティブな要素を入れない
内容は短く保ち、長い説明には別のパターンを使う
Escape で閉じる手段も考慮する

CSS 実装

配置とスタイル設計

トリガーを基準に相対配置する
opacity と transition で滑らかに表示 / 非表示を切り替える
矢印は疑似要素や border トリックで描画する
:focus-visible と組み合わせてキーボード操作にも対応する

キーボード操作

Tab でトリガーへフォーカスするとツールチップが表示される
Escape でツールチップを閉じる
Toggletip は Enter または Space で表示切り替え

ライブデモ

ホバーツールチップ

CSS のみで実装するシンプルなホバー型ツールチップです。

フォーカス対応ツールチップ

キーボードフォーカスでも表示されるアクセシブルな実装です。

Toggletip

明示操作で表示を切り替える補助情報パターンです。

よくある間違い

ツールチップにインタラクティブ要素を入れる

ホバーで消える前提の UI にリンクやボタンを入れると、操作できない要素になります。

キーボードフォーカスで表示されない

ホバー専用だと、キーボード利用者が補足情報に到達できません。

Escape キーで閉じられない

WCAG 1.4.13 を満たすには、閉じる手段の提供も必要です。

重要な情報をツールチップだけに置く

ツールチップは補足専用であり、必須情報の唯一の提示手段にしてはいけません。