Playground

Preview

defaultTop

Variant

Size

Side

Options

<Tooltip>
  <Tooltip.Trigger asChild>
    <Button variant="outline">Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>
    Tooltip text
  </Tooltip.Content>
</Tooltip>

Variants

Default

ダーク背景にシャドウ。浮遊感のある一般的な補足情報に使用。

アイコン説明、ヒント

Inverted

グラスモーフィズム背景。背景ぼかし付きの洗練されたスタイル。

リッチUI、明るい背景

Sizes

sm

フォント12px

パディング4px 10px

default

フォント13px

パディング6px 12px

Size	フォント	パディング	用途	プレビュー
`sm`	12px (text-xs)	4px 10px	コンパクトな補足情報
`default`	13px (text-sm)	6px 12px	標準（デフォルト）

Features

Side Placement

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

<Tooltip.Content side="top">Top</Tooltip.Content>
<Tooltip.Content side="right">Right</Tooltip.Content>
<Tooltip.Content side="bottom">Bottom</Tooltip.Content>
<Tooltip.Content side="left">Left</Tooltip.Content>

Arrow

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

{/* With arrow (default) */}
<Tooltip.Content>With arrow</Tooltip.Content>

{/* Without arrow */}
<Tooltip.Content showArrow={false}>No arrow</Tooltip.Content>

Alignment

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

<Tooltip.Content align="start">Start</Tooltip.Content>
<Tooltip.Content align="center">Center</Tooltip.Content>
<Tooltip.Content align="end">End</Tooltip.Content>

Provider

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

<Tooltip.Provider delayDuration={400} skipDelayDuration={200}>
  {/* All tooltips inside share these delay settings */}
  <Tooltip>
    <Tooltip.Trigger asChild>
      <Button>First</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>First tooltip</Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

API

Component Structure

Tooltip— Radix Tooltip

.Trigger.ContentProps.Arrow.Portal.ProviderProps

.Triggerホバー/フォーカス対象

.ContentPropsツールチップ本体（variant・size・side・arrow）

.Arrow矢印インジケーター（Content内蔵）

.Portalポータル（Content内蔵）

.ProviderPropsグローバル遅延設定

Props

Tooltip (Root)

openundefined

boolean

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

defaultOpenfalse

boolean

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

onOpenChangeundefined

(open: boolean) => void

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

delayDuration200

number

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

disableHoverableContentfalse

boolean

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

Name	Type	Default	Description
`open`	`boolean`	`undefined`	ツールチップの表示状態（制御モード）
`defaultOpen`	`boolean`	`false`	初期表示状態（非制御モード）
`onOpenChange`	`(open: boolean) => void`	`undefined`	表示状態が変更されたときのコールバック
`delayDuration`	`number`	`200`	ホバーから表示までの遅延時間（ms）
`disableHoverableContent`	`boolean`	`false`	コンテンツ上のホバーで表示を維持しない

Tooltip.Content

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

矢印の表示

Name	Type	Default	Description
`variant`	`"default" \| "inverted"`	`"default"`	外観バリアント（default: ダーク背景+シャドウ、inverted: グラスモーフィズム）
`size`	`"sm" \| "default"`	`"default"`	テキストサイズ
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	表示位置
`sideOffset`	`number`	`6`	トリガーからの距離（px）
`align`	`"start" \| "center" \| "end"`	`"center"`	トリガーに対するアラインメント
`showArrow`	`boolean`	`true`	矢印の表示

Tooltip.Provider

delayDuration700

number

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

skipDelayDuration300

number

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

disableHoverableContentfalse

boolean

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

Name	Type	Default	Description
`delayDuration`	`number`	`700`	グローバルなホバー遅延時間（ms）
`skipDelayDuration`	`number`	`300`	連続ホバー時の遅延スキップ時間（ms）
`disableHoverableContent`	`boolean`	`false`	グローバルにコンテンツホバー維持を無効化

Code Recipes

Anatomy

2

Tooltip text

3

sideOffset: 6px

1

Button

1

Trigger

ホバー対象要素

2

Content

ツールチップ本体

3

Arrow

方向を示す矢印

Best Practices

✓

推奨

✓アイコンボタンやアクションの補足説明にTooltipを使用する
✓テキストは短く簡潔にする（1-2行以内）
✓キーボードショートカットの表示にTooltipを活用する
✓省略されたテキストのフル表示にTooltipを使用する

✕

避けるべき

✕必須情報をTooltipのみに配置しない — 常に表示されるテキストに書く
✕インタラクティブなコンテンツ（リンク・ボタン）をTooltip内に配置しない — Popoverを使用する
✕長い段落やリッチコンテンツをTooltipに入れない
✕タッチデバイスのみのユーザーが必要な情報にTooltipを使わない

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
トリガー	ホバー / フォーカス	クリック
コンテンツ	テキストのみ（短い補足）	リッチ（フォーム、ボタン、リンク）
インタラクション	なし（読むだけ）	あり（操作可能）
デフォルト方向	top（読み流れを邪魔しない）	bottom（自然な上→下の操作）
閉じ方	ホバー解除で自動	外部クリック / Esc / Closeボタン
ARIA	role="tooltip"	aria-expanded + aria-controls

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

Accessibility

キーボード操作

Tabトリガーにフォーカスで表示（遅延なし）

Escツールチップを閉じる

ARIA / WCAG

role="tooltip" Radix自動付与
aria-describedby 自動連携
WCAG 1.4.13 — コンテンツホバーで維持
自動衝突回避（画面外はみ出し防止）

Tooltip

Playground

Variants

Sizes

Features

Side Placement

Arrow

Alignment

Provider

API

Component Structure

Props

Tooltip (Root)

Tooltip.Content

Tooltip.Provider

Code Recipes

Anatomy

Best Practices

推奨

避けるべき

Tooltip vs Popover

Accessibility

キーボード操作

ARIA / WCAG

Related

Drawer

Modal

Dropdown