ツールチップ
componentボタンやアイコンにマウスを乗せたとき、またはキーボードでフォーカスしたときに、短い補足テキストを吹き出しで表示します。CSS のみで動作し、JavaScript は不要です。
配置（placement）
.tooltip-{top,bottom,left,right} で表示位置を指定（無指定は top）。下は .is-open-preview による常時表示プレビュー
長いテキスト
最大幅 240px を超えると折り返します。1〜2 文の短い補足に収めてください
使用例 — 実際に試す
マウスホバー、または Tab キーでのフォーカスで表示されます。トリガーには aria-describedby でツールチップの id を関連付けます
機能
このコンポーネントの用途
ホバー / フォーカス時に短い補足テキストを出す吹き出し。
無くても操作が成立する「あると助かる」情報のためのもの。
常設で知らせるべき情報は alert、フォーム項目の説明は label-control の補足テキストを使う。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓フォーカスできる要素（button / a / input 等）をトリガーにし、aria-describedby で関連付ける。
- ✓1〜2 文の短い補足に限定する。placement は top を基本にする。
NG
- ✕操作に不可欠な情報（エラー・必須条件）を入れない → 見えるテキストや alert で常時表示する。
- ✕span や div などフォーカス不能な要素だけに付けない → キーボード利用者に表示されなくなる。
トリガーと aria-describedby で関連付け
補足の伝わり方
トリガーに aria-describedby、吹き出しに role="tooltip" と id。補足が名前の説明として読まれる。
<button aria-describedby="tip">下書き保存</button> <span class="tooltip-content" id="tip" role="tooltip">下書きとして保存</span>
関連付けが無いと、視覚的に吹き出しは出ても SR には補足が結び付かない。重要情報を tooltip だけに置かない。
<button>下書き保存</button> <!-- aria-describedby なし --> <span class="tooltip-content">下書きとして保存</span>
ツールチップのアクセシビリティ
ホバー / フォーカスで出る補足です。WCAG 1.4.13（Dismissible / Hoverable / Persistent）に留意します。CSS のみ実装のため Esc で閉じる（Dismissible）には JS の補助が必要です。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
補足は 1〜2 文に収め、最大幅 240px で折り返す。重要な情報や操作は tooltip だけに置かない。
文字は rem / トークンで拡大に追従。テキスト間隔を広げても切れない。
トリガーに Tab でフォーカスすると表示。Hoverable（ポインタを吹き出しに移せる）・Persistent（フォーカス/ホバー中は保持）を満たす。
トリガーに aria-describedby、吹き出しに role="tooltip" と id。補足がトリガーの説明として読まれる。
DS が担保する機能
追加実装なしで満たされる
- ✓ホバーに加え フォーカスでも表示（
:focus-within） - ✓トリガーと吹き出しを同じ
.tooltipで包むため Hoverable / Persistent を満たす - ✓最大幅 240px で折り返し、コントラストを確保
実装時の必須対応
プロダクト側で担保する
- !トリガーに
aria-describedby、吹き出しにrole="tooltip"と一致するid - !Dismissible: Esc で閉じられるよう JS を補う（CSS のみでは不足）
- !トリガーはフォーカス可能な要素（button / link）にする。非対話要素に付けない
- !重要情報・操作は tooltip だけに置かない（本文でも提供する）
テスト方法
キーボード / スクリーンリーダー / 自動チェック
- 操作Tab でトリガーにフォーカスすると表示、外すと消える
- 操作ポインタを吹き出しに移しても消えない（Hoverable）、Esc で閉じる（要 JS）
- SRトリガーにフォーカスすると「ボタン名、（補足）」と説明が読まれる
- 自動axe / Lighthouse で
aria-describedbyの参照先・コントラストを確認