Tooltip

A UI component that appears to provide additional information when users trigger specific elements.

Overview

Tooltips include brief explanations or guidance to help users understand. They are mainly used for concise information and intuitively show direction with arrows.

Basic Examples

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>

Variants

Tooltip supports two visual variants: default and info

Default Variant

Info Variant

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>

Positions

Tooltip arrows support 12 different positions.

Top Positions

Bottom Positions

Left Positions

Right Positions

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>

Custom Content

You can pass text or any JSX structure through the content prop. Customize with inline styles or custom markup as you wish.

Custom Examples

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>

Controlled Visibility

Use the isVisible prop to control tooltip visibility externally. When true, the tooltip is always visible without hover. When false, hover is disabled.

Controlled Examples

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`	-	Trigger element that shows tooltip on hover
`content`	`React.ReactNode`	-	Tooltip content to display (text or JSX element, fully customizable)
`variant`	`'default' \| 'info'`	`'default'`	Visual variant of tooltip (default or info)
`position`	`'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom'`	`'top'`	Direction that the arrow points to
`offset`	`number`	`8`	Distance from trigger element in pixels
`isVisible`	`boolean`	`undefined`	Control visibility externally (true: always visible, false: disabled, undefined: hover controlled)
`className`	`string`	`''`	Additional CSS classes