Tooltip
툴팁은 요소에 대한 추가 정보를 표시하는 작은 팝업 창입니다. 사용자가 요소에 마우스를 올리거나 포커스할 때 나타납니다.
인터랙티브 예제
아래 UI에서 다양한 속성을 직접 변경하여 Tooltip 컴포넌트의 모습을 확인해보세요.
툴팁 제목툴팁 내용입니다
titlestring
툴팁의 제목
contentstring
툴팁에 표시될 내용
positionselect
툴팁이 표시될 위치
hideArrowboolean
툴팁 화살표 숨김 여부
iconTypeselect
툴팁 아이콘 타입
tooltipTypeselect
툴팁 배경 색상
Import
import { Tooltip } from '@ncds/ui-admin';
기본 사용법
기본 툴팁
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placement | 'top' | 'bottom' | 'left' | 'right' | 'top' | 툴팁의 위치 |
| content | 'string | ReactNode' | - | 툴팁에 표시될 내용 |
| delay | number | [number, number] | [0, 0] | 툴팁 표시/숨김 지연 시간 |
배치(Position) 예제
Top (기본)
상단 툴팁
Top Left
상단 왼쪽 툴팁
Top Right
상단 오른쪽 툴팁
Bottom
하단 툴팁
Bottom Left
하단 왼쪽 툴팁
Bottom Right
하단 오른쪽 툴팁
타이틀이 있는 툴팁 예제
타이틀타이틀이 있는 툴팁
툴팁 화살표 노출 여부 예제
타이틀툴팁 화살표 노출 여부 예제
아이콘 타입 예제
아이콘 stroke (기본)
타이틀아이콘 stroke
아이콘 fill
타이틀아이콘 fill
툴팁 배경 타입 예제
툴팁 배경 타입 black (기본)
타이틀툴팁 배경 타입 예제
툴팁 배경 타입 white
타이틀툴팁 배경 타입 예제
크기(Size) 예제
Small Size
Small Tooltip작은 크기의 툴팁입니다.
Medium Size (기본)
Medium Tooltip중간 크기의 툴팁입니다.
주의사항
- 툴팁은 viewport를 벗어나지 않도록 자동으로 위치가 조정됩니다.
- 툴팁의 내용이 HTML을 포함합니다.
- 툴팁은 기본적으로 마우스 호버 시 표시됩니다.