CodeConnect Design System

Tooltip

要素にホバーした際に補足情報を表示するコンポーネント。アイコンやボタンの機能を簡潔に説明する際に使用します。

セットアップ

Tooltipを使用する前に、アプリのルートでTooltipProviderをセットアップする必要があります。

import { TooltipProvider } from '@codeconnect-llc/design-system'


function App() {
  return (
    <TooltipProvider>
      <YourApp />
    </TooltipProvider>
  )
}

基本的な使い方

import { Tooltip, Button } from '@codeconnect-llc/design-system'


export function Example() {
  return (
    <Tooltip content="これはツールチップです">
      <Button variant="outline">ホバーしてください</Button>
    </Tooltip>
  )
}

表示位置

side propで表示位置を指定できます。

Top (デフォルト)

Preview
Preview

Bottom

Preview

Left

Preview

表示遅延

delayDuration propで表示までの遅延時間（ミリ秒）を設定できます。デフォルトは200msです。

Preview

リッチコンテンツ

content propにはReactノードを渡すことができます。

Preview

Props

PropTypeDefaultDescription
contentReactNode-ツールチップに表示する内容（必須）
side'top' | 'right' | 'bottom' | 'left''top'表示位置
delayDurationnumber200表示までの遅延時間（ミリ秒）
openboolean-制御された開閉状態
defaultOpenboolean-初期の開閉状態
onOpenChange(open: boolean) => void-開閉状態が変更されたときのコールバック

アクセシビリティ

  • キーボード対応: フォーカスを当てるとツールチップが表示される
  • ESCキー: ESCキーでツールチップを閉じる
  • スクリーンリーダー: 適切なARIA属性が自動的に付与される
  • 簡潔な説明: ツールチップのテキストは短く簡潔に保つ

使用例

アイコンボタンの説明:

import { Tooltip, Button } from '@codeconnect-llc/design-system'
import { Save, Copy, Trash2 } from 'lucide-react'


export function IconButtons() {
  return (
    <div className="flex gap-2">
      <Tooltip content="保存 (Ctrl+S)">
        <Button variant="ghost" size="sm">
          <Save className="h-4 w-4" />
        </Button>
      </Tooltip>


      <Tooltip content="コピー">
        <Button variant="ghost" size="sm">
          <Copy className="h-4 w-4" />
        </Button>
      </Tooltip>


      <Tooltip content="削除">
        <Button variant="ghost" size="sm">
          <Trash2 className="h-4 w-4" />
        </Button>
      </Tooltip>
    </div>
  )
}

無効なボタンの理由を説明:

import { Tooltip, Button } from '@codeconnect-llc/design-system'


export function DisabledButtonWithTooltip() {
  return (
    <Tooltip content="すべてのフィールドを入力してください">
      <span>
        <Button variant="primary" disabled>
          送信
        </Button>
      </span>
    </Tooltip>
  )
}

注意: 無効なボタンはポインターイベントを受け取らないため、<span>でラップする必要があります。

データの詳細情報:

import { Tooltip } from '@codeconnect-llc/design-system'
import { Info } from 'lucide-react'


export function DataWithTooltip() {
  return (
    <div className="flex items-center gap-2">
      <span>合計: ¥10,000</span>
      <Tooltip
        content={
          <div className="space-y-1">
            <p>商品: ¥8,000</p>
            <p>送料: ¥1,000</p>
            <p>税金: ¥1,000</p>
          </div>
        }
      >
        <Info className="h-4 w-4 text-text-secondary cursor-help" />
      </Tooltip>
    </div>
  )
}