Podo UI

Podo UI

툴팁

사용자가 특정 요소에 트리거 할 때 추가적인 정보를 제공하기 위해 나타나는 UI 구성요소입니다.

Import

import { Tooltip } from 'podo-ui';

Props

PropTypeDefaultDescription
childrenReact.ReactNode-툴팁의 트리거 요소 (호버 시 툴팁이 표시됨)
contentReact.ReactNode-툴팁에 표시할 내용 (텍스트 또는 JSX 요소, 자유롭게 구조화 가능)
variant'default' | 'info''default'툴팁의 시각적 유형 (default 또는 info)
position'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom''top'화살표가 가리키는 방향
offsetnumber8트리거 요소로부터의 거리 (픽셀 단위)
isVisiblebooleanundefined외부에서 표시 여부 제어 (true: 항상 표시, false: 비활성, undefined: 호버로 제어)
classNamestring''추가 CSS 클래스

개요

툴팁은 사용자가 이해하기 쉽도록 간략한 설명이나 안내를 포함합니다. 주로 간결한 정보를 나타낼 때 사용하며, 화살표로 방향을 직관적으로 표시합니다.

basic.tsx
import { Tooltip } from 'podo-ui';

// Wrap a button
<Tooltip content="Additional information" variant="default">
  <button>Hover me</button>
</Tooltip>

// Wrap an icon
<Tooltip content="Important notice" variant="info">
  <i className="icon-info" />
</Tooltip>
기본 예제

유형

툴팁은 두 가지 시각적 유형을 지원합니다: default와 info

variants.tsx
// Default variant (dark gray background)
<Tooltip content="Default tooltip" variant="default">
  <button>Default</button>
</Tooltip>

// Info variant (blue background)
<Tooltip content="Info tooltip" variant="info">
  <button>Info</button>
</Tooltip>
Default 유형
Info 유형

방향

툴팁의 화살표는 12가지 방향을 지원합니다.

positions.tsx
// Top positions
<Tooltip content="Tooltip" position="topLeft"><button>Top Left</button></Tooltip>
<Tooltip content="Tooltip" position="top"><button>Top</button></Tooltip>
<Tooltip content="Tooltip" position="topRight"><button>Top Right</button></Tooltip>

// Bottom positions
<Tooltip content="Tooltip" position="bottomLeft"><button>Bottom Left</button></Tooltip>
<Tooltip content="Tooltip" position="bottom"><button>Bottom</button></Tooltip>
<Tooltip content="Tooltip" position="bottomRight"><button>Bottom Right</button></Tooltip>

// Left positions
<Tooltip content="Tooltip" position="leftTop"><button>Left Top</button></Tooltip>
<Tooltip content="Tooltip" position="left"><button>Left</button></Tooltip>
<Tooltip content="Tooltip" position="leftBottom"><button>Left Bottom</button></Tooltip>

// Right positions
<Tooltip content="Tooltip" position="rightTop"><button>Right Top</button></Tooltip>
<Tooltip content="Tooltip" position="right"><button>Right</button></Tooltip>
<Tooltip content="Tooltip" position="rightBottom"><button>Right Bottom</button></Tooltip>
상단 방향
하단 방향
왼쪽 방향
오른쪽 방향

커스텀 콘텐츠

content prop을 통해 텍스트나 자유로운 JSX 구조를 전달할 수 있습니다. 인라인 스타일이나 커스텀 마크업으로 원하는 대로 구성하세요.

custom-content.tsx
// With custom JSX structure
<Tooltip content={
  <>
    <strong>Help</strong>
    <br />
    Detailed description
  </>
}>
  <button>Custom JSX</button>
</Tooltip>

// With custom inline styles
<Tooltip content={
  <div style={{ color: '#ffd700' }}>
    <strong>⚠️ Important</strong>
    <br />
    Caution
  </div>
} variant="info">
  <button>Custom Style</button>
</Tooltip>

// With custom offset (default: 8px)
<Tooltip content="Tooltip far away" offset={20}>
  <button>Offset 20px</button>
</Tooltip>
커스텀 예제

제어 가능한 표시

isVisible prop을 사용하여 외부에서 툴팁 표시 여부를 제어할 수 있습니다. true일 경우 호버 없이도 항상 표시되며, false일 경우 호버해도 표시되지 않습니다.

controlled.tsx
// Always visible (without hover)
<Tooltip content="Always visible" isVisible={true}>
  <button>Always Visible</button>
</Tooltip>

// Disabled (hover doesn't work)
<Tooltip content="Hover disabled" isVisible={false}>
  <button>Disabled</button>
</Tooltip>

// Controlled with state
const [show, setShow] = useState(false);

<Tooltip content="Controlled by state" isVisible={show}>
  <button onClick={() => setShow(!show)}>
    Toggle
  </button>
</Tooltip>
제어 예제
항상 표시되는 툴팁