Tooltip

ホバーまたはフォーカス時に補足テキストを表示するオーバーレイコンポーネント。ラベルのないアイコンボタン等に操作内容を伝える。

いつ使うか

IconButton などラベルのない要素に、操作内容を補足するテキストを提示するときに使用する
UI上で省略された情報のフルテキストを表示するときに使用する
ツールバーのように複数のアイコン操作が並ぶ場面で、各操作の意味を伝えるときに使用する

いつ使わないか

長文の説明やインタラクティブなコンテンツを表示したい場合は使わない。Popover を使用する
フォーム入力のバリデーションメッセージには使わない。インラインエラー表示を使用する
常に表示されるべき重要な情報には使わない。ラベルや説明テキストを直接配置する

Usage

import { Tooltip } from '@bi-shop-it/ui/tooltip';

<Tooltip content="編集">
  <IconButton aria-label="編集" icon="Edit" />
</Tooltip>;

Props

Prop	型	デフォルト	説明
`content`	`string`	—	ツールチップに表示するテキスト
`children`	`ReactNode`	—	ツールチップのトリガーとなる要素
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	ツールチップの表示位置

状態

デフォルト

<Tooltip content="編集">
  <IconButton aria-label="編集" icon="Edit" />
</Tooltip>

表示位置

side で上下左右の表示位置を指定できる。

<Tooltip content="上" side="top">
  <IconButton aria-label="上" icon="ChevronUp" variant="outline" />
</Tooltip>
<Tooltip content="右" side="right">
  <IconButton aria-label="右" icon="ChevronRight" variant="outline" />
</Tooltip>
<Tooltip content="下" side="bottom">
  <IconButton aria-label="下" icon="ChevronDown" variant="outline" />
</Tooltip>
<Tooltip content="左" side="left">
  <IconButton aria-label="左" icon="ChevronLeft" variant="outline" />
</Tooltip>

ツールバー

複数の IconButton にそれぞれ Tooltip を適用する例。

<Tooltip content="コピー">
  <IconButton aria-label="コピー" icon="Copy" variant="outline" />
</Tooltip>
<Tooltip content="ダウンロード">
  <IconButton aria-label="ダウンロード" icon="Download" variant="outline" />
</Tooltip>
<Tooltip content="共有">
  <IconButton aria-label="共有" icon="Share" variant="outline" />
</Tooltip>
<Tooltip content="削除">
  <IconButton aria-label="削除" icon="Trash2" variant="destructive" />
</Tooltip>

テキスト要素

テキスト中の特定のワードにツールチップを付与する例。children は任意の要素を受け付ける。

この機能は近日公開です。

<p>
  この機能は
  <Tooltip content="2026年4月リリース予定">
    <span className="cursor-default underline decoration-dashed underline-offset-4">
      近日公開
    </span>
  </Tooltip>
  です。
</p>

UIProvider との統合

Tooltip は内部で Radix UI の TooltipProvider を必要とする。UIProvider に統合済みのため、アプリケーションのルートで UIProvider を設定すれば追加のセットアップは不要である。

import { UIProvider } from '@bi-shop-it/ui/provider';

export default function App({ children }) {
  return <UIProvider>{children}</UIProvider>;
}

アクセシビリティ

コンポーネントが内部で処理すること

Radix UI の Tooltip プリミティブに基づき、role="tooltip" と aria-describedby を自動的に設定する
Escape キーでツールチップを閉じることができる
トリガー要素へのフォーカスでもツールチップが表示されるため、キーボード操作をサポートする

利用者が対応すること

IconButton をトリガーにする場合は、aria-label を必ず設定すること。ツールチップはスクリーンリーダーの代替にはならない
ツールチップの content は簡潔な補足テキストに留めること。重要な操作説明は aria-label やラベルで提供する