Tooltip

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

SmartHR UIではTooltipです。

使いどころ

Tooltipは、UI上のスペースに余裕がない場合に、以下の目的で使います。

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

Tooltipの使用を避けるケース

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

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

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

種類

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

レイアウト

構成

  1. Tooltip
  2. トリガー

Tooltipによる補足情報の構成要素

1. Tooltip

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

2. トリガー

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

Tooltipの配置

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

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

上配置

下配置

横配置

自動配置

ライティング

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

デザインパターン

Tooltipのトリガーパターン

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

A. テキスト+アイコン

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

B. アイコンのみ

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

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

テキストとあわせて使用
テキスト
タイトル

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

ステータスの補足に使用
テキスト
テキスト

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

C. アイコンボタン

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

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

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

D. 省略テキスト

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

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

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

Props

NameRequiredTypeDescription
messagetruestring, number, false, true, {}, ReactElement<any, string | JSXElementConstructor<any>>, Iterable<ReactNode>, ReactPortalツールチップ内に表示するメッセージ
childrentruestring, number, false, true, {}, ReactElement<any, string | JSXElementConstructor<any>>, Iterable<ReactNode>, ReactPortalツールチップを表示する対象の要素
triggerType-"text", "icon"ツールチップを表示する対象のタイプ。アイコンの場合は `icon` を指定する
multiLine-false, trueツールチップ内を複数行で表示する場合に `true` を指定する
ellipsisOnly-false, true`true` のとき、ツールチップを表示する対象が省略されている場合のみツールチップ表示を有効にする
horizontal-"left", "right", "center", "auto"水平方向の位置
vertical-"top", "middle", "bottom", "auto"垂直方向の位置
tabIndex-numberツールチップを表示する対象の tabIndex 値