Tooltip

요소가 키보드 포커스를 받거나 마우스를 올렸을 때 관련 정보를 표시하는 팝업입니다.

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@chadcn/ui"

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">마우스를 올려보세요</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>라이브러리에 추가</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

동작 방식

이 컴포넌트는 현재 shadcn/ui 원본과 동일합니다. Chad 동작은 곧 추가될 예정입니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.

pnpm add @chadcn/ui

앱의 루트에 TooltipProvider를 추가하세요.

app/layout.tsx

import { TooltipProvider } from "@chadcn/ui"

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

사용법

import "@chadcn/ui/styles.css"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@chadcn/ui"

<Tooltip>
  <TooltipTrigger>마우스를 올려보세요</TooltipTrigger>
  <TooltipContent>
    <p>라이브러리에 추가</p>
  </TooltipContent>
</Tooltip>

준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

방향

side prop을 사용하여 툴팁의 위치를 변경할 수 있습니다.

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@chadcn/ui"

export function TooltipSides() {
  return (
    <TooltipProvider>
      <div className="flex flex-wrap items-center gap-4">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">위</Button>
          </TooltipTrigger>
          <TooltipContent side="top">
            <p>위쪽 툴팁</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">오른쪽</Button>
          </TooltipTrigger>
          <TooltipContent side="right">
            <p>오른쪽 툴팁</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">아래</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom">
            <p>아래쪽 툴팁</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">왼쪽</Button>
          </TooltipTrigger>
          <TooltipContent side="left">
            <p>왼쪽 툴팁</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

API 레퍼런스

자세한 내용은 Radix Tooltip 문서를 참고하세요.