Tooltip

툴팁 컴포넌트는 요소에 마우스를 올렸을 때 추가 정보를 표시합니다.

기본 사용법

import { 
  Tooltip, 
  TooltipTrigger, 
  TooltipContent, 
  TooltipProvider 
} from '@aift/ui/Tooltip';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>
      툴팁 내용
    </TooltipContent>
  </Tooltip>
</TooltipProvider>;

Hover me

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@aift/ui/Tooltip';

export default function Preview() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipContent direction="up">툴팁 내용</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

import {  Tooltip,  TooltipTrigger,  TooltipContent,  TooltipProvider,} from '@aift/ui/Tooltip';export default function Preview() {  return (    <TooltipProvider>      <Tooltip>        <TooltipTrigger>Hover me</TooltipTrigger>        <TooltipContent direction="up">툴팁 내용</TooltipContent>      </Tooltip>    </TooltipProvider>  );}

Direction

TooltipContent의 direction 속성을 사용하여 툴팁의 방향을 설정할 수 있습니다.

import { Button } from '@aift/ui';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@aift/ui/Tooltip';

export default function Direction() {
  return (
    <div className="max-w-md flex flex-col gap-4">
      <TooltipProvider>
        <div>
        <Tooltip>
          <TooltipTrigger><Button>위</Button></TooltipTrigger>
          <TooltipContent direction="up">툴팁 내용</TooltipContent>
        </Tooltip>
        </div>
        <div>
        <Tooltip>
          <TooltipTrigger><Button>아래</Button></TooltipTrigger>
          <TooltipContent direction="down">툴팁 내용</TooltipContent>
        </Tooltip>
        </div>
        <div>
        <Tooltip>
          <TooltipTrigger><Button>왼쪽</Button></TooltipTrigger>
          <TooltipContent direction="left">툴팁 내용</TooltipContent>
        </Tooltip>
        </div>
        <div>
        <Tooltip>
          <TooltipTrigger><Button>오른쪽</Button></TooltipTrigger>
          <TooltipContent direction="right">툴팁 내용</TooltipContent>
        </Tooltip>
        </div>
      </TooltipProvider>
    </div>
  );
}

import { Button } from '@aift/ui';import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@aift/ui/Tooltip';export default function Direction() {  return (    <div className="max-w-md flex flex-col gap-4">      <TooltipProvider>        <div>        <Tooltip>          <TooltipTrigger><Button>위</Button></TooltipTrigger>          <TooltipContent direction="up">툴팁 내용</TooltipContent>        </Tooltip>        </div>        <div>        <Tooltip>          <TooltipTrigger><Button>아래</Button></TooltipTrigger>          <TooltipContent direction="down">툴팁 내용</TooltipContent>        </Tooltip>        </div>        <div>        <Tooltip>          <TooltipTrigger><Button>왼쪽</Button></TooltipTrigger>          <TooltipContent direction="left">툴팁 내용</TooltipContent>        </Tooltip>        </div>        <div>        <Tooltip>          <TooltipTrigger><Button>오른쪽</Button></TooltipTrigger>          <TooltipContent direction="right">툴팁 내용</TooltipContent>        </Tooltip>        </div>      </TooltipProvider>    </div>  );}

Color

TooltipContent의 color 속성을 사용하여 툴팁의 색상을 설정할 수 있습니다.

'use client';

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@aift/ui/Tooltip';
import { Button } from '@aift/ui/Button';

export default function Color() {
  return (
    <div className="max-w-md flex flex-col gap-4">
      <TooltipProvider>
        <div>
        <Tooltip>
          <TooltipTrigger><Button>Gray</Button></TooltipTrigger>
          <TooltipContent direction="up" color="gray">툴팁 내용</TooltipContent>
        </Tooltip>
        </div>
        <div>
        <Tooltip>
          <TooltipTrigger><Button>White</Button></TooltipTrigger>
          <TooltipContent direction="up" color="white">툴팁 내용</TooltipContent>
        </Tooltip>
        </div>
      </TooltipProvider>
    </div>
  );
}

'use client';import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@aift/ui/Tooltip';import { Button } from '@aift/ui/Button';export default function Color() {  return (    <div className="max-w-md flex flex-col gap-4">      <TooltipProvider>        <div>        <Tooltip>          <TooltipTrigger><Button>Gray</Button></TooltipTrigger>          <TooltipContent direction="up" color="gray">툴팁 내용</TooltipContent>        </Tooltip>        </div>        <div>        <Tooltip>          <TooltipTrigger><Button>White</Button></TooltipTrigger>          <TooltipContent direction="up" color="white">툴팁 내용</TooltipContent>        </Tooltip>        </div>      </TooltipProvider>    </div>  );}

Props

Tooltip 컴포넌트는 Radix UI의 Tooltip를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.

TooltipProvider: 툴팁 제공자
Tooltip: 툴팁 루트 컴포넌트
TooltipTrigger: 툴팁 트리거 컴포넌트
TooltipContent: 툴팁 콘텐츠 컴포넌트

TooltipContent Props

Prop	Type	Default	Description
direction	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	툴팁 방향
color	`'gray' \| 'white'`	`'gray'`	툴팁 색상