툴팁
사용자가 특정 요소에 트리거 할 때 추가적인 정보를 제공하기 위해 나타나는 UI 구성요소입니다.
개요
툴팁은 사용자가 이해하기 쉽도록 간략한 설명이나 안내를 포함합니다. 주로 간결한 정보를 나타낼 때 사용하며, 화살표로 방향을 직관적으로 표시합니다.
기본 예제
basic.tsx
import { Tooltip } from 'podo-ui';
// Wrap a button
<Tooltip content="추가 정보입니다" variant="default">
<button>Hover me</button>
</Tooltip>
// Wrap an icon
<Tooltip content="중요한 안내사항" variant="info">
<i className="icon-info" />
</Tooltip>유형
툴팁은 두 가지 시각적 유형을 지원합니다: default와 info
Default 유형
Info 유형
variants.tsx
// Default variant (dark gray background)
<Tooltip content="기본 툴팁" variant="default">
<button>Default</button>
</Tooltip>
// Info variant (blue background)
<Tooltip content="정보 툴팁" variant="info">
<button>Info</button>
</Tooltip>방향
툴팁의 화살표는 12가지 방향을 지원합니다.
상단 방향
하단 방향
왼쪽 방향
오른쪽 방향
positions.tsx
// Top positions
<Tooltip content="툴팁" position="topLeft"><button>Top Left</button></Tooltip>
<Tooltip content="툴팁" position="top"><button>Top</button></Tooltip>
<Tooltip content="툴팁" position="topRight"><button>Top Right</button></Tooltip>
// Bottom positions
<Tooltip content="툴팁" position="bottomLeft"><button>Bottom Left</button></Tooltip>
<Tooltip content="툴팁" position="bottom"><button>Bottom</button></Tooltip>
<Tooltip content="툴팁" position="bottomRight"><button>Bottom Right</button></Tooltip>
// Left positions
<Tooltip content="툴팁" position="leftTop"><button>Left Top</button></Tooltip>
<Tooltip content="툴팁" position="left"><button>Left</button></Tooltip>
<Tooltip content="툴팁" position="leftBottom"><button>Left Bottom</button></Tooltip>
// Right positions
<Tooltip content="툴팁" position="rightTop"><button>Right Top</button></Tooltip>
<Tooltip content="툴팁" position="right"><button>Right</button></Tooltip>
<Tooltip content="툴팁" position="rightBottom"><button>Right Bottom</button></Tooltip>커스텀 콘텐츠
content prop을 통해 텍스트나 자유로운 JSX 구조를 전달할 수 있습니다. 인라인 스타일이나 커스텀 마크업으로 원하는 대로 구성하세요.
커스텀 예제
custom-content.tsx
// With custom JSX structure
<Tooltip content={
<>
<strong>도움말</strong>
<br />
상세 설명입니다
</>
}>
<button>Custom JSX</button>
</Tooltip>
// With custom inline styles
<Tooltip content={
<div style={{ color: '#ffd700' }}>
<strong>⚠️ 중요</strong>
<br />
주의사항
</div>
} variant="info">
<button>Custom Style</button>
</Tooltip>
// With custom offset (default: 8px)
<Tooltip content="더 멀리 떨어진 툴팁" offset={20}>
<button>Offset 20px</button>
</Tooltip>제어 가능한 표시
isVisible prop을 사용하여 외부에서 툴팁 표시 여부를 제어할 수 있습니다. true일 경우 호버 없이도 항상 표시되며, false일 경우 호버해도 표시되지 않습니다.
제어 예제
항상 표시되는 툴팁
controlled.tsx
// Always visible (without hover)
<Tooltip content="항상 표시" isVisible={true}>
<button>Always Visible</button>
</Tooltip>
// Disabled (hover doesn't work)
<Tooltip content="호버 불가능" isVisible={false}>
<button>Disabled</button>
</Tooltip>
// Controlled with state
const [show, setShow] = useState(false);
<Tooltip content="상태로 제어" isVisible={show}>
<button onClick={() => setShow(!show)}>
Toggle
</button>
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | 툴팁의 트리거 요소 (호버 시 툴팁이 표시됨) |
content | React.ReactNode | - | 툴팁에 표시할 내용 (텍스트 또는 JSX 요소, 자유롭게 구조화 가능) |
variant | 'default' | 'info' | 'default' | 툴팁의 시각적 유형 (default 또는 info) |
position | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 화살표가 가리키는 방향 |
offset | number | 8 | 트리거 요소로부터의 거리 (픽셀 단위) |
isVisible | boolean | undefined | 외부에서 표시 여부 제어 (true: 항상 표시, false: 비활성, undefined: 호버로 제어) |
className | string | '' | 추가 CSS 클래스 |