Tooltip

툴팁은 요소에 마우스를 올리거나 포커스했을 때 짧은 설명을 보여주는 작은 팝오버입니다. 아이콘의 의미, 기능, 단축키 같은 부가 정보를 간결하게 전달할 때 사용합니다.

Figma 컴포넌트: Tooltip

데모는 마우스를 트리거 위에 올리면 툴팁이 나타납니다.

Default

가장 기본 형태입니다. 짧은 한 줄 텍스트와 화살표가 표시됩니다.

description 속성을 사용하면 제목 아래 보조 설명을 함께 표시할 수 있습니다.

placement로 툴팁이 트리거 기준 어느 방향에 표시될지 지정할 수 있습니다. top, bottom은 -start/-end로 정렬을 미세 조정할 수 있습니다.

arrow={false}로 화살표 없이 표시할 수 있습니다.

open prop으로 표시 상태를 외부에서 제어할 수 있습니다. (예: 항상 보이게 하거나 onboarding 코치마크 형태로 사용)

Prop	Type	Default	Description
`children`	ReactNode	`-`	툴팁이 부착될 트리거 요소 (필수)
`title`	string	`-`	툴팁 제목 텍스트
`description`	string	`-`	제목 아래 보조 설명 텍스트
`placement`	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'right'	`'top'`	툴팁 위치
`arrow`	boolean	`true`	화살표 표시 여부
`open`	boolean	`-`	Controlled mode — 항상 표시할지 외부에서 제어

Property	Values
Supporting text	`True` `False`
Arrow	`None` `Top center` `Bottom center` `Top left` `Top right` `Bottom left` `Bottom right` `Left` `Right`