Tooltip
마우스를 올리면 추가 정보를 표시하는 툴팁 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add tooltip
사용법
TSX
import {
Tooltip,
TooltipTrigger,
TooltipContent,
SimpleTooltip,
} from "@msub-core/ui/components/tooltip"
function MyComponent() {
return (
<Tooltip>
<TooltipTrigger asChild>
<Button>Hover me</Button>
</TooltipTrigger>
<TooltipContent>This is a tooltip</TooltipContent>
</Tooltip>
)
}기본
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "top" | No | 툴팁 표시 위치 |
| align | "start" | "center" | "end" | "center" | No | 정렬 방식 |
| delayDuration | number | 300 | No | 표시 지연 시간 (ms) |
| open | boolean | - | No | 제어 모드 열림 상태 |
| onOpenChange | (open: boolean) => void | - | No | 열림 상태 변경 콜백 |
위치
정렬
SimpleTooltip
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| content | ReactNode | - | Yes | 툴팁 내용 |
| side | "top" | "bottom" | "left" | "right" | "top" | No | 표시 위치 |
| align | "start" | "center" | "end" | "center" | No | 정렬 방식 |
| delayDuration | number | 300 | No | 표시 지연 시간 (ms) |