Tooltip

Floating UI 기반의 헤드리스 툴팁 컴포넌트. 호버·포커스 시 컨텍스트 콘텐츠를 표시하며, 배치, 오프셋, 닫기 처리, CSS 전환을 기본 지원합니다.

데모

마우스를 올려보세요비활성화됨

Show Code

API 레퍼런스

Tooltip

Prop	Type	Default	Description
enabled	boolean	true	툴팁 활성화 여부. false일 경우 툴팁이 열리지 않음
placement	Placement	"top"	툴팁 배치 위치 (top, bottom, left, right 및 변형)
offset	OffsetOptions	8	트리거와 툴팁 사이의 픽셀 간격
flip	FlipOptions	-	공간 부족 시 반대편으로 자동 전환 여부 및 옵션
shift	ShiftOptions	-	뷰포트를 벗어나지 않도록 축을 따라 이동 옵션
delay	UseHoverProps["delay"]	-	호버 열기/닫기 딜레이 (밀리초 또는 { open, close } 객체)
transition	boolean | UseTransitionStylesProps	false	열기/닫기 CSS 전환 활성화
dismiss	UseDismissProps	-	닫기 동작 설정 (외부 클릭, Esc 키)
onOpen	() => void	-	툴팁이 열릴 때 호출 (비제어 모드)
onClose	() => void	-	툴팁이 닫힐 때 호출 (비제어 모드)
open	boolean	-	제어 모드: 열림 상태를 외부에서 제어 (onOpenChange와 함께 사용)
onOpenChange	(open: boolean) => void	-	제어 모드: 열림 상태 변경 요청 시 호출
options	Omit<UseFloatingOptions, "open" | "onOpenChange">	-	Floating UI useFloating에 전달되는 옵션 (placement, middleware, strategy 등)
children	ReactNode	-	Tooltip.Trigger와 Tooltip.Content 하위 컴포넌트

Tooltip.Trigger

Prop	Type	Default	Description
children	ReactElement	-	툴팁의 기준이 되는 트리거 요소

Tooltip.Content

Prop	Type	Default	Description
children	ReactElement | ((props: { floating, interactions }) => ReactNode)	-	표시할 툴팁 콘텐츠 또는 floating 컨텍스트를 받는 렌더 함수