Playground

Preview

defaultBottom

Variant

Size

Side

Options

<Popover>
  <Popover.Trigger asChild>
    <Button variant="outline">Open Popover</Button>
  </Popover.Trigger>
  <Popover.Content>
    <div className="space-y-2">
      <h4 className="font-semibold text-foreground">Settings</h4>
      <p className="text-sm text-text-muted">
        Configure your preferences here.
      </p>
    </div>
  </Popover.Content>
</Popover>

Variants

Default

ペーパー背景にボーダーとシャドウ。一般的なポップオーバーに使用。

フォーム、設定

Elevated

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

プロフィール、詳細

Sizes

sm

フォント13px

パディング12px

角丸8px

default

フォント13px

パディング16px

角丸12px

lg

フォント14px

パディング20px

角丸12px

Size	フォント	パディング	角丸
`sm`	13px (text-sm)	12px	8px (rounded-lg)
`default`	13px (text-sm)	16px	12px (rounded-xl)
`lg`	14px (text-md)	20px	12px (rounded-xl)

Features

Side Placement

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

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

Arrow

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

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

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

Close Button

showCloseで内蔵の閉じるボタンを表示できます。closeIconでアイコンをカスタマイズ可能です。

<Popover.Content showClose>
  <h4 className="font-semibold pr-6">Settings</h4>
  <p>Content with close button</p>
</Popover.Content>

Alignment

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

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

Modal Mode

modalを有効にすると、背景の操作が無効化されます。フォーカストラップも自動的に適用されます。

<Popover modal>
  <Popover.Trigger asChild>
    <Button>Modal Popover</Button>
  </Popover.Trigger>
  <Popover.Content showClose>
    Background interaction is blocked
  </Popover.Content>
</Popover>

API

Component Structure

Popover— Radix Popover

.Trigger.ContentProps.Arrow.Close.Anchor.Portal

.Triggerクリック対象

.ContentPropsポップオーバー本体（variant・size・side・arrow・close）

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

.Close閉じるボタン（Content内蔵 or 手動配置）

.Anchorカスタムアンカーポイント

.Portalポータル（Content内蔵）

Props

Popover (Root)

openundefined

boolean

ポップオーバーの表示状態（制御モード）

defaultOpenfalse

boolean

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

onOpenChangeundefined

(open: boolean) => void

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

modalfalse

boolean

背景操作を無効化し、フォーカストラップを適用する

Name	Type	Default	Description
`open`	`boolean`	`undefined`	ポップオーバーの表示状態（制御モード）
`defaultOpen`	`boolean`	`false`	初期表示状態（非制御モード）
`onOpenChange`	`(open: boolean) => void`	`undefined`	表示状態が変更されたときのコールバック
`modal`	`boolean`	`false`	背景操作を無効化し、フォーカストラップを適用する

Popover.Content

variant"default"

"default" | "elevated"

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

size"default"

"sm" | "default" | "lg"

テキストサイズとパディング

side"bottom"

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

表示位置

sideOffsetauto (12 with arrow, 6 without)

number

トリガーからの距離（デフォルト: 矢印あり12px / なし6px）

align"center"

"start" | "center" | "end"

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

showArrowtrue

boolean

矢印の表示

showClosefalse

boolean

内蔵の閉じるボタンの表示

closeIconundefined

ReactNode

閉じるボタンのカスタムアイコン

Name	Type	Default	Description
`variant`	`"default" \| "elevated"`	`"default"`	外観バリアント（default: ペーパー背景+ボーダー+シャドウ、elevated: グラスモーフィズム）
`size`	`"sm" \| "default" \| "lg"`	`"default"`	テキストサイズとパディング
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	表示位置
`sideOffset`	`number`	`auto (12 with arrow, 6 without)`	トリガーからの距離（デフォルト: 矢印あり12px / なし6px）
`align`	`"start" \| "center" \| "end"`	`"center"`	トリガーに対するアラインメント
`showArrow`	`boolean`	`true`	矢印の表示
`showClose`	`boolean`	`false`	内蔵の閉じるボタンの表示
`closeIcon`	`ReactNode`	`undefined`	閉じるボタンのカスタムアイコン

Code Recipes

Anatomy

1

Open popover

sideOffset: 12px

3

2

4

1

Trigger

起動ボタン

2

Content

フローティングパネル

3

Arrow

方向を示す矢印

4

Close

閉じるボタン

Best Practices

✓

推奨

✓インライン編集やフォーム入力にPopoverを使用する
✓リンクやボタンなどインタラクティブなコンテンツに適している
✓確認ダイアログの軽量代替として使用する
✓閉じるボタンまたはPopover.Closeで明確な閉じ方を提供する

✕

避けるべき

✕単純な補足情報にPopoverを使わない — Tooltipを使用する
✕大量のコンテンツをPopoverに入れない — Modalを使用する
✕メニューリストにPopoverを使わない — Dropdownを使用する
✕入れ子のPopoverを使わない — UXが複雑になる

Popover vs Tooltip

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

トリガー

Popover: クリック

Tooltip: ホバー / フォーカス

コンテンツ

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

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

インタラクション

Popover: あり（操作可能）

Tooltip: なし（読むだけ）

デフォルト方向

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

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

閉じ方

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

Tooltip: ホバー解除で自動

ARIA

Popover: aria-expanded + aria-controls

Tooltip: role="tooltip"

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

使い分けのポイント： Popoverは「クリックで開くインタラクティブなコンテンツ」に使用。単純な補足テキストのみの場合はTooltipを使用します。

Accessibility

キーボード操作

Enter / Spaceポップオーバーを開く/閉じる

Escポップオーバーを閉じる

Tabコンテンツ内のフォーカス移動

ARIA / WCAG

aria-expanded トリガーに自動付与
aria-controls 自動連携
自動フォーカス管理（open/close時）
自動衝突回避（画面外はみ出し防止）

Popover

Playground

Variants

Sizes

Features

Side Placement

Arrow

Close Button

Alignment

Modal Mode

API

Component Structure

Props

Popover (Root)

Popover.Content

Code Recipes

Anatomy

Best Practices

推奨

避けるべき

Popover vs Tooltip

Accessibility

キーボード操作

ARIA / WCAG

Related

Tooltip

Modal

Dropdown