KARAKURIDESIGN SYSTEM

Tooltip

Tooltipは、要素にホバーまたはフォーカスしたときに補足情報を表示するオーバーレイコンポーネントです。 ボタンやアイコンの説明、ショートカットキーの表示などに適しています。

2
Variants
2
Sizes
4
Sides
Radix
Base

Playground

Preview
defaultTop
Variant
Size
Side
Options
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    Tooltip text
  </TooltipContent>
</Tooltip>

Variants

Default
ダーク背景にシャドウ。浮遊感のある一般的な補足情報に使用。
アイコン説明、ヒント
Inverted
グラスモーフィズム背景。背景ぼかし付きの洗練されたスタイル。
リッチUI、明るい背景

Sizes

sm
フォント12px
パディング4px 10px
default
フォント13px
パディング6px 12px

Features

Side Placement

4方向（top, right, bottom, left）に配置できます。デフォルトはtopです。

Arrow

showArrowでトリガーを指す矢印の表示を制御できます。デフォルトは表示です。

Alignment

alignでトリガーに対する配置を調整できます。

Provider

TooltipProviderでグローバルな遅延設定を管理できます。 連続ホバー時にskipDelayDurationにより次のツールチップが即座に表示されます。

API

Component Structure

Tooltip— Radix Tooltip
.Trigger.ContentProps.Arrow.Portal.ProviderProps

Props

Tooltip (Root)

openundefined
boolean

ツールチップの表示状態（制御モード）

defaultOpenfalse
boolean

初期表示状態（非制御モード）

onOpenChangeundefined
(open: boolean) => void

表示状態が変更されたときのコールバック

delayDuration200
number

ホバーから表示までの遅延時間（ms）

disableHoverableContentfalse
boolean

コンテンツ上のホバーで表示を維持しない

TooltipContent

variant"default"
"default" | "inverted"

外観バリアント（default: ダーク背景+シャドウ、inverted: グラスモーフィズム）

size"default"
"sm" | "default"

テキストサイズ

side"top"
"top" | "right" | "bottom" | "left"

表示位置

sideOffset6
number

トリガーからの距離（px）

align"center"
"start" | "center" | "end"

トリガーに対するアラインメント

showArrowtrue
boolean

矢印の表示

TooltipProvider

delayDuration700
number

グローバルなホバー遅延時間（ms）

skipDelayDuration300
number

連続ホバー時の遅延スキップ時間（ms）

disableHoverableContentfalse
boolean

グローバルにコンテンツホバー維持を無効化

Tooltip vs Popover

似たフローティングUIですが、用途とインタラクションが異なります。

トリガー

Tooltip: ホバー / フォーカス

Popover: クリック

コンテンツ

Tooltip: テキストのみ（短い補足）

Popover: リッチ（フォーム、ボタン、リンク）

インタラクション

Tooltip: なし（読むだけ）

Popover: あり（操作可能）

デフォルト方向

Tooltip: top（読み流れを邪魔しない）

Popover: bottom（自然な上→下の操作）

閉じ方

Tooltip: ホバー解除で自動

Popover: 外部クリック / Esc / Closeボタン

ARIA

Tooltip: role="tooltip"

Popover: aria-expanded + aria-controls

使い分けのポイント： Tooltipは「ホバーで表示される短い補足テキスト」に使用。 リンクやボタンなどインタラクティブなコンテンツが必要な場合はPopoverを使用します。