Tooltip

ツールチップ

GitHub でソースを見る

プレビュー

使いどころ

使う場面

  • アイコンだけのボタンの名前や、省略した文字の補足など、読めなくても操作に困らない短い説明
  • side（既定 "top"）で出る向きを指定する。画面の端では反対側に自動で切り替わる
  • delay（既定 200ms）で、通りすがりのホバーでは出ないようにする

使わない場面

  • 操作に必須の情報や、入力のルール。常に表示するか FormField の hint に書く
  • リンクやボタンを含む内容、長い説明。Popover か HelpButton を使う
  • タッチ端末でしか伝わらない情報。ホバーのない端末では見えない前提で設計する
  • disabled のボタンの理由を載せること。フォーカスもホバーも受けないことがあるので、近くに文言で書く

使い方

<Tooltip content="ヘルプテキスト">
  <Button>ホバー</Button>
</Tooltip>

プロパティ

名前型デフォルト説明
content必須ReactNodeなしツールチップに表示するテキスト
children必須ReactElementなしトリガーとなる要素（1 つの要素。文字列は不可）
openbooleanなし表示状態（制御）。指定すると、ホバー・フォーカス・Escape は onOpenChange を呼ぶだけになる
defaultOpenbooleanなし初期の表示状態（非制御）
onOpenChange(open: boolean) => voidなし表示状態が変わる時のコールバック
side"top" | "bottom" | "left" | "right""top"ツールチップの表示位置
delaynumberなし表示までの待ち時間（ミリ秒）
classNamestringなしツールチップ要素に足すクラス
styleCSSPropertiesなしツールチップ要素のインラインスタイル（位置はコンポーネントが決める）

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー動作
Tabトリガーにフォーカスを移すと、delay のあとに Tooltip が表示される
Escape表示中の Tooltip を閉じる（フォーカスは動かない）

アクセシビリティ

  • role="tooltip" の要素が、トリガーの aria-describedby に結ばれる。名前（aria-label）の代わりにはならない
  • アイコンだけのボタンには aria-label を付けたうえで、見える補足として Tooltip を添える
  • ホバー・フォーカスで出て、Escape で閉じ、Tooltip の上にポインターを乗せても消えない（WCAG 1.4.13）
  • 中にフォーカスできる要素を入れない。操作できる中身は Popover を使う

文言

  • 1 行、10〜20 字を目安に名詞か動詞句で書く（「ダークモードに切り替え」）
  • ボタンのラベルを繰り返さない。ラベルが「保存」なら、「変更を保存」のように足りない情報を書く

関連するコンポーネント