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'