ShadCN UI 학습기: ToolTip 컴포넌트

인턴을 진행하는 도중 학습했고 적용했던 내용 중 블로그에 올려야겠다는 내용이 있었다.

shadcn/ui의 Tooltip 컴포넌트

툴팁(Tooltip)은 우리가 UI를 설계할 때 자주 마주치는 컴포넌트, 사용자 경험(UX)에는 꽤 큰 영향을 주는 요소
복잡한 UI나, 아이콘 중심의 인터페이스를 설계할 때 툴팁 하나가 사용자의 이해도를 크게 올려줄 수 있음.

또한 Tooltip은 마우스를 올리거나, 특정 요소에 포커스가 되었을 때 간단한 설명이나 정보를 제공하는 컴포넌트
예를 들어 아이콘 버튼에 커서를 올리면 "삭제", "편집" 같은 텍스트가 뜨는 것
사용자는 클릭하거나 화면을 이동하지 않고도 기능을 이해할 수 있다.

다음과 같은 장점이 있음.

접근성(A11y): 키보드 포커스만으로도 툴팁이 보입니다.
애니메이션: 부드러운 등장과 퇴장 효과로 UI에 자연스럽게 녹아듭니다.
완전한 커스터마이징: Tailwind로 디자인을 완전히 제어할 수 있습니다.

코드는 다음과 같이 작성할 수 있음.

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <button className="p-2 rounded bg-muted">?</button>
    </TooltipTrigger>
    <TooltipContent>
      기다란 설명 글......
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

마침 title이 길어질 경우에 관한 ui 깨짐 현상이 발생하여 이를 발견 후 처리하는 과정에서 이 ToolTip이라는 컴포넌트를 사용함.
말줄임 표시 truncate css 적용과 더불어 호버 시 전체 title을 보여주도록 구현함.

툴팁에 관한 이미지는

아래 링크에 들어가보시면 직접 시연이 가능하고
추가적인 설명과 코드 설명이 있음.

ToolTip 공식 문서