補足説明テキストをホバーやフォーカスで一時的に表示するためのツールチップコンポーネントです。アイコンのみボタンへのラベル付け、LineClampで省略したテキストの全文表示など、限られたスペースで補足情報を添えるときに使います。
- 補足的な説明テキストを表示する場合
- アイコンだけのボタンにラベルを表示する場合
- 省略されたテキストを全文表示する場合
import
import { Tooltip } from 'smarthr-ui'
Props
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| message | ReactNode | - | ✓ | ツールチップ内に表示するメッセージ |
| triggerType | "text" | "icon" | - | - | ツールチップを表示する対象のタイプ。アイコンの場合は icon を指定する |
| ellipsisOnly | boolean | - | - | true のとき、ツールチップを表示する対象が省略されている場合のみツールチップ表示を有効にする |
| tabIndex | number | 0 | - | ツールチップを表示する対象の tabIndex 値 |
| ariaDescribedbyTarget | "wrapper" | "inner" | wrapper | - | ツールチップを内包要素に紐付けるかどうか |
実装ルール
Tooltip に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト
冒頭 Warning (via _components/Warning.tsx)
- [should] 基本的には Tooltip 以外の UI を使用することを検討する
使用上の注意 > Tooltipの使用を避けるケース
- [avoid] Tooltip 内の情報は隠れるため、操作に必要な情報の表示への使用は避ける
- [should] ユーザーが把握しておかないと操作が進められないような重要な情報は、常に表示することを検討する
- パスワードに使用できる文字や、エラーになる入力値などの入力要件
- 入力エラーとなった際のエラーメッセージ
- 操作補助になる情報（ショートカットなど）
使用上の注意 > Tooltipの使用を避けるケース > 例外
- [should] Tooltip の使用は例外ケースに限定する（付加的情報の表示、Tooltip 提供コンポーネントの利用基準に沿った使用）
- ユーザーの操作過程で「確認が必須ではない」程度の付加的な情報を表示する目的
- LineClamp で折り返して表示することがどうしても難しい場合
- SearchInput で検索結果が得られなかったときの再検索ヒントを補助として使う場合（再検索ヒント自体は必ず見える場所に表示する）
- Button の disabledReason: DropdownMenuButton 内の Button で使う場合
- Button の disabledReason: Button 単独でも付加的情報を表示する目的で使う場合
- [must] Button の disabled 理由を示す場合は、Tooltip を使わず見える場所に表示する
レイアウト > 構成 > 2. トリガー
- [should] トリガーは、マウスオーバーが可能な要素であることを想起させるテキスト・アイコン・色を組み合わせる
デザインパターン > Tooltipのトリガーパターン > A. テキスト＋アイコン
- [must] 補足する対象となるテキストの横に
FaCircleInfoIconを配置し、Tooltip の存在を明確に示す - [must] テキスト＋アイコンパターンのアイコンの色には
TEXT_GRAYを使う
デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ
- [must] アイコン単体をトリガーにするパターンは、どうしても他に方法がないときだけ使用する
- [avoid] アイコン単体で意味が伝わる場合は Tooltip を使わない
- [must] アイコン単体をトリガーにする場合は、アイコンに必ず代替テキストを設定する
- [must] アイコン単体でテキストなど他の要素と合わせず配置する場合は、リンク色（
TEXT_LINK）を使う
デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ > テキストとあわせて使用
- [must] テキストとあわせて使うアイコンの色には
TEXT_GRAYを使う
デザインパターン > Tooltipのトリガーパターン > B. アイコンのみ > ステータスの補足に使用
- [must] ステータスの補足説明を加えるときはアイコンをテキストの左に配置し、ステータスの色に合わせる
デザインパターン > Tooltipのトリガーパターン > C. アイコンボタン
- [avoid] Text ボタンのアイコンボタンには Tooltip を使用しない
- [should] ラベルテキスト以上の説明を表示したい場合は、ラベルテキストがあるボタンの採用や、説明テキストが入るレイアウトを検討する
デザインパターン > Tooltipのトリガーパターン > D. 省略テキスト
- [must] 省略テキストパターンでは、テキストは
ellipsisを使い省略されていることを示す - [must] 単純に文章を省略したい場合は LineClamp を使用する
モバイル
- [avoid] モバイルでは Tooltip を使わない
モバイル > やむを得ずモバイルでTooltipを表示する例 > disabledReason
- [should] モバイルでも、よくあるリストのリスト操作エリアなどテキストで理由を表示するスペースを確保できない無効状態のボタンには
disabledReasonを用いて Tooltip を表示する