Tooltip

補足説明テキストをホバーやフォーカスで一時的に表示するためのツールチップコンポーネントです。アイコンのみボタンへのラベル付け、LineClampで省略したテキストの全文表示など、限られたスペースで補足情報を添えるときに使います。

• 補足的な説明テキストを表示する場合
• アイコンだけのボタンにラベルを表示する場合
• 省略されたテキストを全文表示する場合

使用上の注意

Tooltipの使用を避けるケース

Tooltip内の情報は隠れるため、操作に必要な情報の表示への使用は避けましょう。ユーザーが把握しておかないと操作が進められないような重要な情報は、常に表示することを検討してください。

重要な情報とは、フォームの入力に必要な情報などが該当します。具体例は次のとおりです。

• パスワードに使用できる文字や、エラーになる入力値などの入力要件
• 入力エラーとなった際のエラーメッセージ
• 操作補助になる情報（ショートカットなど）

例外

• ユーザーの操作過程で「確認が必須ではない」程度の付加的な情報を表示する目的での使用
• Tooltipによる表示が提供されているコンポーネントにおいて、利用基準に沿った使用
  • LineClamp
    • 折り返して表示することがどうしても難しい場合
  • SearchInput
    • 検索キーワードに該当する検索結果が得られなかったとき、再検索のためのヒントを見える場所に必ず表示したうえで、補助としてTooltipのメッセージを使う場合
  • Button の disabledReason props 使用時
    • DropdownMenuButton 内のButtonで使う場合（配置できるスペースがドロップダウン内に限られるため仕方なく使う）
    • Button単独の場合でも、ユーザーの操作過程で「確認が必須ではない」程度の付加的な情報を表示する目的で使う場合
    • 上記以外のケースは、Tooltipを使わずにdisabledである理由を見える場所に表示する

種類

Tooltipはトリガー要素にfocusやhoverで表示します。詳しくはトリガーパターンを参照してください。

レイアウト

構成

1. Tooltip
2. トリガー

1. Tooltip

Tooltipそのものです。吹き出し形式で補足的なテキストを表示します。

2. トリガー

Tooltipが表示されるきっかけとなる要素を「トリガー」と呼びます。 トリガーは、Tooltipが表示されることをユーザーに示唆するために、マウスオーバーが可能な要素であることを想起させるテキスト、アイコン、色を組み合わせます。

ライティング

関連するライティングガイドラインを参照してください。

• Tooltipのライティング

デザインパターン

Tooltipのトリガーパターン

トリガーは、用途によっていくつかの種類に分けられます。

• A. テキスト＋アイコン
• B. アイコンのみ
• C. アイコンボタン
• D. 省略テキスト

A. テキスト＋アイコン

テキストに対して、Tooltipでさらに補足したい場合に使います。 補足する対象となるテキストの横に「」アイコン（FaCircleInfoIcon）を配置し、Tooltipの存在を明確に示します。 アイコンの色にはTEXT_GRAYを使います。

B. アイコンのみ

充分にスペースを確保できないときに、アイコン単体をトリガーにするパターンですが、どうしても他に方法がないときだけ使用してください。

• アイコン単体で意味が伝わるようであれば、Tooltipは不要です。
• アイコンに必ず代替テキストを設定します。

テキストなどの他の要素と合わせず、アイコン単体で配置する場合は、マウスオーバーが可能であることを示唆するためにリンク色（TEXT_LINK）を使います。

テキストとあわせて使用

トリガーとなるのはアイコンのみで、タイトルやよくあるテーブルのオブジェクト名のテキストとあわせて使います。 アイコンの色にはTEXT_GRAYを使います。

ステータスの補足に使用

ステータスの補足説明を加えるときにはテキストの左に配置し、ステータスの色に合わせます。 トリガーはステータスアイコンのみとなるので、テキストはリンクとしても使用できます。

C. アイコンボタン

Buttonのアイコンボタンのように、ラベルテキストを表示できないボタンに、（ラベルテキスト相当の）機能を表す補足をTooltipで表示するパターンです。

Textボタンのアイコンボタンには使用しません。

ボタンは明確なアクションを促す役割を持つため、ラベルテキスト以上の説明を表示したい場合は、ラベルテキストがあるボタンの採用や、説明テキストが入るようなレイアウトを検討しましょう。

D. 省略テキスト

テキストを表示するスペースを十分確保できないときに、テキスト全体をトリガーとして、省略したすべてのテキストをTooltipで表示するパターンです。

テキストは、ellipsisを使い省略されていることを示します。

単純に文章を省略したい場合には、LineClampを使用してください。

アクセシビリティ

開発時の考慮点

Tooltipの内容に応じてtypeを使い分ける

アイコンボタンのラベルなど、Tooltipの内容を要素のアクセシブルネームとして利用する場合はtype="label"を使用してください。 補足説明を提供する場合はtypeの指定は不要です（デフォルトで補足情報として扱われます）。

type="label"を指定するとaria-labelledbyでトリガー要素に関連付けられ、スクリーンリーダーで要素のラベルとして読み上げられます。 typeを指定しない場合はaria-describedbyで関連付けられ、補足情報として扱われます。

良い実装例

アイコンに対する補足説明を提供する（デフォルトなのでtypeの指定は不要）

Tooltipの内容をラベルとして利用する場合はtype="label"を使用する

悪い実装例

Tooltipの内容をラベルとして利用しているが、type="label"を指定していません。

そのため、Tooltipに「追加」と表示されていても、ボタンのアクセシブルネームとして利用されないため、スクリーンリーダーでボタンを検索した際に「ボタン」としか読み上げられず、何のボタンかわかりません。

関連ページ

• hoverで表示されるコンテンツはポインタを乗せても表示を維持できる | 弱視・ロービジョンのユーザビリティチェックリスト

モバイル

モバイルではTooltipを使わないでください。画面内の領域が小さいため、Tooltipの表示が他のUIの利用を妨げることがあります。

やむを得ずモバイルでTooltipを表示する例

表示領域が限られていて、補足情報の提示が必要な場合にはやむを得ずTooltipを使用することがあります。

disabledReasonで無効状態の理由を表示する場合

無効状態(disabled)のButtonでは、無効状態の理由をTooltipで表示するためのPropsとして disabledReason を提供しています。

よくあるリストのリスト操作エリア のように、レイアウト上テキストで理由を表示するスペースを確保できない場合は、無効状態のボタンに対して disabledReason を用いてTooltipを表示します。

使い方チェックリスト

Tooltip

参照元：冒頭

• Should

  基本的には Tooltip 以外の UI を使用することを検討する

参照元：使用上の注意 > Tooltipの使用を避けるケース 「使用上の注意 > Tooltipの使用を避けるケース」の本文へ移動

• Avoid

  Tooltip 内の情報は隠れるため、操作に必要な情報の表示への使用は避ける
• Should

  ユーザーが把握しておかないと操作が進められないような重要な情報は、常に表示することを検討する

  • パスワードに使用できる文字や、エラーになる入力値などの入力要件
  • 入力エラーとなった際のエラーメッセージ
  • 操作補助になる情報（ショートカットなど）

参照元：使用上の注意 > 例外 「使用上の注意 > 例外」の本文へ移動

• Must

  Button の disabled 理由を示す場合は、Tooltip を使わず見える場所に表示する
• Should

  Tooltip の使用は例外ケースに限定する（付加的情報の表示、Tooltip 提供コンポーネントの利用基準に沿った使用）

  • ユーザーの操作過程で「確認が必須ではない」程度の付加的な情報を表示する目的
  • LineClamp で折り返して表示することがどうしても難しい場合
  • SearchInput で検索結果が得られなかったときの再検索ヒントを補助として使う場合（再検索ヒント自体は必ず見える場所に表示する）
  • Button の disabledReason: DropdownMenuButton 内の Button で使う場合
  • Button の disabledReason: Button 単独でも付加的情報を表示する目的で使う場合

参照元：レイアウト > 構成 > 2. トリガー 「レイアウト > 構成 > 2. トリガー」の本文へ移動

• Should

  トリガーは、マウスオーバーが可能な要素であることを想起させるテキスト・アイコン・色を組み合わせる

参照元：デザインパターン > Tooltipのトリガーパターン > A. テキスト＋アイコン 「デザインパターン > Tooltipのトリガーパターン > A. テキスト＋アイコン」の本文へ移動

• Must

  補足する対象となるテキストの横に `FaCircleInfoIcon` を配置し、Tooltip の存在を明確に示す
• Must

  テキスト＋アイコンパターンのアイコンの色には `TEXT_GRAY` を使う

参照元：デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ 「デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ」の本文へ移動

• Must

  アイコン単体をトリガーにするパターンは、どうしても他に方法がないときだけ使用する
• Must

  アイコン単体をトリガーにする場合は、アイコンに必ず代替テキストを設定する
• Must

  アイコン単体でテキストなど他の要素と合わせず配置する場合は、リンク色（`TEXT_LINK`）を使う
• Avoid

  アイコン単体で意味が伝わる場合は Tooltip を使わない

参照元：デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ > テキストとあわせて使用 「デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ > テキストとあわせて使用」の本文へ移動

• Must

  テキストとあわせて使うアイコンの色には `TEXT_GRAY` を使う

参照元：デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ > ステータスの補足に使用 「デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ > ステータスの補足に使用」の本文へ移動

• Must

  ステータスの補足説明を加えるときはアイコンをテキストの左に配置し、ステータスの色に合わせる

参照元：デザインパターン > Tooltipのトリガーパターン > C. アイコンボタン 「デザインパターン > Tooltipのトリガーパターン > C. アイコンボタン」の本文へ移動

• Avoid

  Text ボタンのアイコンボタンには Tooltip を使用しない
• Should

  ラベルテキスト以上の説明を表示したい場合は、ラベルテキストがあるボタンの採用や、説明テキストが入るレイアウトを検討する

参照元：デザインパターン > Tooltipのトリガーパターン > D. 省略テキスト 「デザインパターン > Tooltipのトリガーパターン > D. 省略テキスト」の本文へ移動

• Must

  省略テキストパターンでは、テキストは `ellipsis` を使い省略されていることを示す
• Must

  単純に文章を省略したい場合は LineClamp を使用する

参照元：アクセシビリティ > 開発時の考慮点 > Tooltipの内容に応じてtypeを使い分ける 「アクセシビリティ > 開発時の考慮点 > Tooltipの内容に応じてtypeを使い分ける」の本文へ移動

• Must

  Tooltipの内容を要素のアクセシブルネームとして利用する場合は `type="label"` を使用する（補足説明の場合は指定不要）

参照元：モバイル 「モバイル」の本文へ移動

• Avoid

  モバイルでは Tooltip を使わない

参照元：モバイル > やむを得ずモバイルでTooltipを表示する例 > `disabledReason`で無効状態の理由を表示する場合 「モバイル > やむを得ずモバイルでTooltipを表示する例 > `disabledReason`で無効状態の理由を表示する場合」の本文へ移動

• Should

  モバイルでも、よくあるリストのリスト操作エリアなどテキストで理由を表示するスペースを確保できない無効状態のボタンには `disabledReason` を用いて Tooltip を表示する

Props