ホーム/コンポーネント/オーバーレイ/ポップオーバー Popover

Popover

トリガー要素に対して表示されるポップオーバーコンポーネント。createPortal でオーバーフローを回避。

import { Popover } from "@blueai/ui"

Examples

Bottom (default)

<Popover
  open={open}
  onClose={() => setOpen(false)}
  trigger={<FormButton onClick={() => setOpen(!open)}>クリック</FormButton>}
>
  <div className="p-3">ポップオーバーの内容</div>
</Popover>

Right placement

<Popover open={open} onClose={() => setOpen(false)} placement="right" trigger={...}>
  ...
</Popover>

Props

Prop	Type	Default	Description
open*	boolean	—	表示状態
onClose*	() => void	—	閉じるコールバック
trigger*	ReactNode	—	トリガー要素
children*	ReactNode	—	ポップオーバーの内容
placement	"top" \| "bottom" \| "left" \| "right"	—	配置（デフォルト: bottom）