Tooltip

아이콘 버튼처럼 공간이 작은 동작에 포인터를 올리거나 키보드로 포커스했을 때 짧은 보조 설명을 보여 줍니다.

미리보기

아이콘과 키보드 포커스 안내

관심 종목 아이콘과 텍스트 버튼에 포인터를 올리거나 포커스해 위·아래로 표시되는 안내를 비교합니다.

버튼에 hover하거나 focus하세요.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/tooltip

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

아이콘과 키보드 포커스 안내

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/tooltip

Registry JSON

사용법

Tooltip 안에 TooltipTrigger와 TooltipContent를 두고 필요하면 TooltipProvider를 공유하세요. 트리거 자체에도 이름을 제공하고 필수 안내는 보이는 텍스트로 둡니다.

"use client";

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

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button />}>Formatting</TooltipTrigger>
        <TooltipContent>Choose how text appears.</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

API 레퍼런스

Base UI Tooltip 기반으로 Provider, Root, Trigger, Portal, Positioner와 Popup을 조합합니다. 기본 provider 지연은 250ms이며 popup은 trigger 주변 충돌을 자동으로 피합니다.

컴포넌트	속성	타입	기본값	설명
`TooltipProvider`	`delay`	`number`	`250`	pointer hover 후 tooltip을 열기까지의 지연 시간(ms)입니다.
`Tooltip`	`open / defaultOpen`	`boolean`	`false`	controlled 또는 초기 uncontrolled 열림 상태입니다.
`Tooltip`	`onOpenChange`	`(open: boolean) => void`	`—`	열림 상태가 바뀔 때 호출됩니다.
`TooltipTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	버튼이나 링크에 tooltip trigger 동작을 합성합니다.
`TooltipContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"top" / "center"`	trigger를 기준으로 popup 위치를 정합니다.
`TooltipContent`	`sideOffset`	`number`	`8`	trigger와 popup 사이의 간격입니다.

미리보기

아이콘과 키보드 포커스 안내

설치

사용법

API 레퍼런스

접근성