툴팁

툴팁은 요소나 본문 텍스트에 제공되는 짧은 부가 설명이다.

사용 지침

아이콘 버튼의 의미 보강처럼 핵심 정보가 아닌 보조 설명에 사용하고, 모바일에서는 호버가 동작하지 않으므로 중요 정보는 항상 본문이나 라벨로 함께 전달합니다.

examples/tooltip/TooltipVertical.tsx

"use client"
import { Button } from "@/components/ui/button"
import { Tooltip } from "@/components/ui/tooltip"

examples/tooltip/TooltipHorizontal.tsx

"use client"
import { Button } from "@/components/ui/button"
import { Tooltip } from "@/components/ui/tooltip"

examples/tooltip/TooltipBox.tsx

"use client"
import { Button } from "@/components/ui/button"
import { Tooltip } from "@/components/ui/tooltip"

examples/tooltip/TooltipWithIcon.tsx

"use client"
import { CircleHelp } from "lucide-react"
import { Tooltip } from "@/components/ui/tooltip"

Tab 포커스, ESC key 로 제어

examples/tooltip/TooltipKeyboard.tsx

"use client"
import { Button } from "@/components/ui/button"
import { Tooltip } from "@/components/ui/tooltip"

이름	타입	기본값	설명
align	enum	center	—
alignOffset	number	—	—
aria-label	string	—	A more descriptive label for accessibility purpose
arrowPadding	number	—	—
asChild	boolean	—	—
avoidCollisions	boolean	—	—
className	string	—	—
collisionBoundary	Boundary \| Boundary[]	—	—
collisionPadding	number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>	—	—
delayDuration	number	0	—
forceMount	true	—	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
hideWhenDetached	boolean	—	—
id	string	—	—
onClick	MouseEventHandler<HTMLDivElement>	—	—
onEscapeKeyDown	((event: KeyboardEvent) => void)	—	Event handler called when the escape key is down. Can be prevented.
onPointerDownOutside	((event: PointerDownOutsideEvent) => void)	—	Event handler called when the a `pointerdown` event happens outside of the `Tooltip`. Can be prevented.
side	enum	—	—
sideOffset	number	—	—
sticky	enum	—	—
style	CSSProperties	—	—
tabIndex	number	—	—
text필수	ReactNode	—	—
updatePositionStrategy	enum	—	—
variant	enum	vertical	—