Popover ポップオーバーカード
Tooltip と似ていますが、タイトルとより豊かな内容（HTML 構造、リストなど）を担えます。クリックまたはホバーでトリガーします。
基本的な使い方
方位、トリガー方式と矢印
import { LhButton, LhPopover } from '@lh-ui/react'
export default function Demo() {
return (
<LhPopover title="タイトル" content="これはポップオーバーカードの内容です。" placement="top">
<LhButton>上方</LhButton>
</LhPopover>
)
}
Popover Props
| プロパティ | 説明 | 型 | 使用可能な値 | デフォルト値 |
|---|---|---|---|---|
| children | トリガーノード | ReactNode | — | — |
| title | タイトル（__title 領域に描画） | ReactNode | — | — |
| content | 内容（__content 領域に描画） | ReactNode | — | — |
| placement | 表示位置 | LhPopoverPlacement | top / bottom / left / right（-start / -end を含む） | 'top' |
| trigger | トリガー方式 | LhPopoverTrigger | 'hover' | 'click' | 'focus' | 'manual' | 'click' |
| disabled | ポップオーバーを無効化 | boolean | — | false |
| arrow | 矢印を表示するかどうか | boolean | — | true |
| width | ポップアップの幅 | string | number | — | — |
| visible | 制御された表示状態 | boolean | — | — |
| defaultVisible | 非制御のデフォルト表示 | boolean | — | false |
| showAfter | 表示の遅延（ms。デフォルト 200 で誤操作を防止） | number | — | 200 |
| hideAfter | 非表示の遅延（ms。デフォルト 100 はポインタがポップアップに移動するための猶予） | number | — | 100 |
| popperClass | ポップアップのカスタムクラス名 | string | — | — |
| themeVars | コンポーネントレベルのテーマ変数 | Record<string, string> | — | — |
| bgPattern | コンポーネントレベルの背景紋様 | string | — | — |
| sx | クイックレイアウトプロパティ（トリガーに作用） | SxProps | — | — |
Popover イベント
| イベント | 説明 | コールバックシグネチャ | Vue 対応 |
|---|---|---|---|
| onVisibleChange | 表示状態の変化（制御・非制御どちらでも発火） | (visible: boolean) => void | update:visible |
ref
forwardRef<HTMLDivElement> —— トリガーのルート要素です。LhPopoverInstance は show() / hide() / toggle() / isVisible を公開します。
フォーカストラップ
trigger="click" の時、ポップアップレイヤーはダイアログのセマンティクスでフォーカスをトラップし（Tab が内部で循環）、閉じる時に返還します。
hover / focus トリガーはフォーカスを奪わず、plus の isModal の挙動と一致します。
アクセシビリティ
ポップアップレイヤーは role="dialog" です。タイトルが存在する場合は aria-labelledby で関連付け、トリガーは aria-describedby でポップアップレイヤーを関連付けます。
スタイル
import '@lh-ui/react/style/popover'