탐색과 공개@neumorphism-ui/tooltip

Tooltip

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

@neumorphism-ui/tooltip

Registry JSON

미리보기

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

설치

npx shadcn@latest add @neumorphism-ui/tooltip

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

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

Example

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={<Button size="icon" aria-label="설정 열기" />}
    >
      ⚙
    </TooltipTrigger>
    <TooltipContent side="top">
      설정
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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 사이의 간격입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성