툴팁

툴팁

툴팁은 요소에 마우스를 올리거나 키보드 포커스가 갔을 때, 그 요소와 관련된 정보를 보여주는 작은 팝업 컴포넌트예요. 아이콘 버튼의 의미를 설명하거나, 축약된 정보를 풀어줄 때 유용하죠. Radix UI의 툴팁 프리미티브 위에 만들어져 있어서 포커스와 접근성 처리가 잘 되어 있어요.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 툴팁 컴포넌트를 바로 추가할 수 있어요.

CLI Manual 
npx shadcn@latest add tooltip

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-tooltip

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

툴팁 관련 컴포넌트들을 import 하고, TooltipProvider 안에 Tooltip을 감싼 뒤 TooltipTrigger와 TooltipContent를 조합해 주세요.

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

더 알아보기 (Learn more)