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"이면 오버레이가 dialog 의미론에 따라 포커스를 가두고(Tab이 내부에서 순환), 닫힐 때 포커스를 반환합니다. hover / focus 트리거는 포커스를 빼앗지 않으며, plus의 isModal 동작과 일치합니다.
접근성
오버레이는 role="dialog"입니다. 제목이 있으면 aria-labelledby로 연결하고, 트리거는 aria-describedby로 오버레이와 연결됩니다.
스타일
import '@lh-ui/react/style/popover'