Tooltip

@hua-labs/ui

v1.1.0

호버 시 추가 정보를 표시하는 툴팁 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Tooltip } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 Tooltip

위치

변형

Props

이름	타입	기본값	설명
`content*`	`string`	-	툴팁 텍스트 내용
`position`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	툴팁 표시 위치
`variant`	`"default" \| "light" \| "dark"`	`"default"`	툴팁 스타일 변형
`delay`	`number`	`300`	표시 지연 시간 (ms)
`disabled`	`boolean`	`false`	툴팁 비활성화

코드 예시

기본 사용법tsx

1// Via framework (recommended)
2import { Tooltip } from '@hua-labs/ui';
3import { Button } from '@hua-labs/ui';
4// Or direct import
5// import { Tooltip } from '@hua-labs/ui/interactive';
6 
7<Tooltip content="This is helpful text">
8  <Button>Hover me</Button>
9</Tooltip>

위치tsx

1<Tooltip content="Top" position="top"><Button>Top</Button></Tooltip>
2<Tooltip content="Bottom" position="bottom"><Button>Bottom</Button></Tooltip>
3<Tooltip content="Left" position="left"><Button>Left</Button></Tooltip>
4<Tooltip content="Right" position="right"><Button>Right</Button></Tooltip>

변형tsx

1<Tooltip content="Default" variant="default">...</Tooltip>
2<Tooltip content="Light" variant="light">...</Tooltip>
3<Tooltip content="Dark" variant="dark">...</Tooltip>

Tabs Toast