Thinca Design System

Home / Components / Tooltip

Tooltip

アイコンや要素にホバー(またはフォーカス)したときに、補足情報を一時的に表示する小さなポップアップ。矢印は持たない設計で、トリガーへの近接で関連性を示す(Google Meet のコールコントロールバー上のツールチップと同じ思想)。配置はトリガーの画面内位置から下記ルールで自動決定される。

プレビュー

このプレビュー枠を「画面」と見立てて、四隅と中央にインフォアイコンを配置した例。各アイコンにマウスを乗せる と、配置ルールに従ってツールチップが開く。上端のアイコンでは下に flip し、左寄りなら吹き出しは左端揃え、右寄りなら右端揃え、中央なら中央揃え。

配置ルール(placement)

placement は top / bottom の 2 方向のみ(左右は採用しない)。smarthr-ui の TooltipPortal と同じ判定ロジックで、①縦は「トリガの上に余裕があれば上、無ければ下に flip」、②横は端での見切れに応じて自動で詰める ─ 中央配置で両端に余裕があれば center、トリガが画面中央より左寄りなら start(吹き出し左端=トリガ左端)、右寄りなら end(吹き出し右端=トリガ右端)。下のタブは各 placement を強制した見本で、実装ではホバー / フォーカス時のみ表示される。

トリガー
横揃え
アイコン
import { Tooltip } from "@/components/Tooltip";
import { Icon } from "@/components/Icon";

<Tooltip content="ヘルプテキスト" placement="top" align="center">
  <Icon name="info" size={20} />
</Tooltip>

デザインパターン

トリガーの種類を 4 パターンに分類する。基本は A、それ以外は A が成立しない(スペース不足、ラベルテキストを持たない、長文の省略など)ケースの代替として選ぶ。

A. テキスト + アイコン

補足情報が必要なラベルの隣に info アイコンを配置する基本パターン。アイコンの存在自体が「補足あり」を示すサインになる。新規実装はまずこのパターンを検討する。

対応中の通話

B. アイコンのみ

ラベルを持たず、info アイコン単体で補足を呼び出すパターン。A が成立しないとき(列ヘッダーやステータス脇でスペースが足りないなど)だけ採用する。下は列ヘッダーとステータスバッジの例。

顧客名顧客状態
対応中

C. アイコンボタン

ラベル非表示のアイコンボタンに、hover でアクション名を表示する。Google Meet のコールコントロールバーや、行内の編集 / 削除アイコンが代表例。トリガーが button そのものになるので、Tooltip には asChild を渡して button のネストを防ぐ。

D. 省略テキスト

スペース不足で省略表示された全文を hover で表示する。テーブルセルや一覧の長文カラムで使う。トリガーは省略表示している要素そのものになるので asChild + tabIndex=0 でキーボード操作にも対応する。

株式会社グローバル・コミュニケーションズ・テクノロジー研究所

仕様

  • トリガー20×20 アイコン(info を既定)。任意の要素を children で差し替え可
  • ボックス背景#FFFFFF(secondary-white)
  • ボックス padding2px × 4px(縦 × 横)
  • ボックス角丸4px(radius-s)
  • ボックスの shadow0 2px 2.5px rgba(31, 41, 55, 0.30)(transparency-30)
  • 文字14px / Regular / text-primary
  • 矢印持たない。トリガーへの近接(4px)で関連性を示す
  • トリガーとの距離(sideOffset)4px。矢印が無いので、この距離がそのままトリガーと吹き出しの間の余白になる
  • 画面端からの余白(collisionPadding)10px。吹き出しはこの値を保って端で押し戻される
  • 表示トリガーhover / focus(キーボード)/ touch。click では開かない
  • 表示ディレイhover は 400ms。focus / touch は即時。誤爆を防ぎつつ意図的に止まった hover だけに反応させる
  • アクセシビリティtrigger は <button>、bubble は role="tooltip" + aria-describedby を Radix が自動付与

利用基準

使うべき時

  • アイコン単独で意味が伝わりにくいときの補足ラベル
  • 省略表示(LineClamp)された長文の全文を表示する
  • 確認必須ではない付加情報(任意項目の説明、書式ヒントなど)
  • Disabled なボタンの「無効化されている理由」を示す(disabledReason)

使わない時

  • 操作に必須の情報(入力要件、エラーメッセージ、ショートカット等)→ 通常テキストで常時表示する
  • 長文・複雑な情報 → Modal / Popover を使用
  • クリックで開く UI → Popover を使用(Tooltip は click トリガーを持たない)
  • 重要なエラーメッセージ → フィールド直下に常時表示する

Figma

Tooltip コンポーネントを開く ↗