Popover
Popoverは、トリガー要素をクリックすると表示されるフローティングパネルです。 フォーム入力、設定パネル、リッチコンテンツの表示など、インタラクティブな要素を含むオーバーレイに適しています。
Playground
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Open Popover</Button>
</PopoverTrigger>
<PopoverContent>
<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>
</PopoverContent>
</Popover>Variants
Sizes
smdefaultlg| 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です。
Arrow
showArrowでトリガーを指す矢印の表示を制御できます。デフォルトは表示です。
Alignment
alignでトリガーに対する配置を調整できます。
Modal Mode
modalを有効にすると、背景の操作が無効化されます。フォーカストラップも自動的に適用されます。
API
Component Structure
Popover— Radix Popover.Triggerクリック対象.ContentPropsポップオーバー本体（variant・size・side・arrow・close）.Arrow矢印インジケーター（Content内蔵）.Close閉じるボタン（Content内蔵 or 手動配置）.Anchorカスタムアンカーポイント.Portalポータル（Content内蔵）Props
Popover (Root)
openundefinedbooleanポップオーバーの表示状態（制御モード）
defaultOpenfalseboolean初期表示状態（非制御モード）
onOpenChangeundefined(open: boolean) => void表示状態が変更されたときのコールバック
modalfalsebooleanモーダルモード（背景の操作を無効化）
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | ポップオーバーの表示状態（制御モード） |
defaultOpen | boolean | false | 初期表示状態（非制御モード） |
onOpenChange | (open: boolean) => void | undefined | 表示状態が変更されたときのコールバック |
modal | boolean | false | モーダルモード（背景の操作を無効化） |
PopoverContent
variant"default""default" | "elevated"外観バリアント（default: ペーパー背景、elevated: グラスモーフィズム）
size"default""sm" | "default" | "lg"パディングとテキストサイズ
side"bottom""top" | "right" | "bottom" | "left"表示位置
sideOffsetauto (12 with arrow, 6 without)numberトリガーからの距離（px）
align"center""start" | "center" | "end"トリガーに対するアラインメント
showArrowtrueboolean矢印の表示
showClosefalseboolean閉じるボタンの表示
closeIconundefinedReactNodeカスタム閉じるアイコン
| 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) | トリガーからの距離（px） |
align | "start" | "center" | "end" | "center" | トリガーに対するアラインメント |
showArrow | boolean | true | 矢印の表示 |
showClose | boolean | false | 閉じるボタンの表示 |
closeIcon | ReactNode | undefined | カスタム閉じるアイコン |
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を使用します。