Tooltip

요소에 호버하면 추가 정보를 표시하는 툴팁

Basic Usage

요소에 마우스를 올리면 툴팁이 표시됩니다.

tsx

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline" size="icon">
      <Plus className="size-4" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>새로 추가하기</p>
  </TooltipContent>
</Tooltip>

Positions

side 속성으로 툴팁의 위치를 지정할 수 있습니다.

tsx

<TooltipContent side="top">상단에 표시</TooltipContent>
<TooltipContent side="bottom">하단에 표시</TooltipContent>
<TooltipContent side="left">좌측에 표시</TooltipContent>
<TooltipContent side="right">우측에 표시</TooltipContent>

With Icons

아이콘 버튼에 설명을 추가할 때 유용합니다.

tsx

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon">
      <Settings className="size-4" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>설정</p>
  </TooltipContent>
</Tooltip>

Multiple Tooltips

TooltipProvider로 여러 툴팁을 감싸면 지연 시간을 공유합니다.

tsx

<TooltipProvider delayDuration={0}>
  <Tooltip>
    <TooltipTrigger>첫 번째</TooltipTrigger>
    <TooltipContent>첫 번째 툴팁</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>두 번째</TooltipTrigger>
    <TooltipContent>두 번째 툴팁</TooltipContent>
  </Tooltip>
</TooltipProvider>

Usage

tsx

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  TooltipProvider,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button>Hover me</button>
      </TooltipTrigger>
      <TooltipContent>
        <p>추가 정보가 여기에 표시됩니다</p>
      </TooltipContent>
    </Tooltip>
  );
}