Tooltip

Tooltipコンポーネントは、UI上のスペースが限られている場合に、補足テキストを一時的に表示するために使います。

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

使用上の注意

Tooltipの使用を避けるケース

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

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

• パスワードに使用できる文字や、エラーになる入力値などの入力要件
• 入力エラーとなった際のエラーメッセージ

種類

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

レイアウト

構成

1. Tooltip
2. トリガー

1. Tooltip

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

2. トリガー

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

Tooltipの配置

Tooltipの配置は8種類の選択肢があります。

• 矢印の出る方向をhorizontal（横）とvertical（縦）の組み合わせで指定します。
• レイアウトによってTooltipの一部が見切れる場合があるため、Tooltip全体が表示されるように指定してください。
• horizontal（横）とvertical（縦）の両方にautoを指定すると、レイアウトを加味して自動的に方向を決めてくれます。

上配置

下配置

横配置

自動配置

ライティング

• 文章は、簡潔なテキストになるよう心がけてください。
• 1文のみの場合でも、文章には句点をつけます。
• 単語/ラベルのみの場合は句点を省略します。

デザインパターン

Tooltipのトリガーパターン

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

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

A. テキスト＋アイコン

文章でさらに補足したい内容がある場合に使います。
補足する対象となるテキストの横に「」アイコン（FaInfoCircleIcon）を配置し、補足情報の存在を明確に表示します。 アイコンの色は、テキストと同様にTEXT_LINKとすることで、マウスオーバーが可能であることを示唆します。

B. アイコンのみ

充分にスペースを確保できないときに、アイコン単体をトリガーにするパターンですが、どうしても他に方法がないときだけ使用してください。
何を対象とした補足説明なのかを明確にするために、可能な限り「テキスト＋アイコン」を採用することを推奨します。

アイコンは、マウスオーバーが可能であることを示唆するためにリンク色（TEXT_LINK）を使います。

テキストとあわせて使用

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

ステータスの補足に使用

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

C. アイコンボタン

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

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

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

D. 省略テキスト

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

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

単純に文章を省略したい場合には、LineClampコンポーネントを使用してください。

Props