Skip to Content
ComponentsIcignalTooltip

Tooltip

요소에 마우스를 올렸을 때 보조 설명을 표시하는 툴팁 컴포넌트

개요

iCignal Tooltip은 Foundation Tooltip(Provider, Root, Trigger, Content)을 래핑하여, trigger와 children만으로 툴팁을 구성할 수 있는 간결한 컴포넌트입니다. TooltipProvider가 내부에 포함되어 별도 Provider 설정 없이 사용할 수 있습니다.

주요 특징

  • ✅ 간결한 구성: trigger + children만으로 툴팁 완성
  • ✅ Provider 내장: TooltipProvider 자동 포함
  • ✅ 위치 제어: side, align, 오프셋 props 지원
  • ✅ 지연 시간: delay로 표시 지연 시간 조정
  • ✅ 조건부 비활성: hidden으로 툴팁 표시 억제
  • ✅ 제어/비제어: open, defaultOpen, onOpenChange 지원

사용 예시

기본 사용

trigger에 트리거 요소를, children에 툴팁 내용을 전달합니다. 트리거에 마우스를 올리면 툴팁이 표시됩니다.

표시 방향 (side)

side prop으로 트리거 기준 표시 방향을 지정합니다.

정렬 및 오프셋

align, sideOffset, alignOffset으로 세부 위치를 조정합니다.

지연 시간 및 비활성

delay로 표시 지연 시간(ms)을 조정하고, hidden으로 툴팁 표시를 억제할 수 있습니다.

API Reference

Props

PropTypeDefaultDescription
triggerReactElement-툴팁을 여는 트리거 요소
childrenReactNode-툴팁 내용
delaynumber-표시 지연 시간 (ms)
openboolean-열림 상태 (제어 모드)
defaultOpenboolean-초기 열림 상태 (비제어 모드)
side"top" | "right" | "bottom" | "left"-트리거 기준 표시 방향
sideOffsetnumber-표시 방향 오프셋 (px)
align"start" | "center" | "end"-트리거 기준 콘텐츠 정렬
alignOffsetnumber-정렬 방향 오프셋 (px)
hiddenboolean-툴팁 콘텐츠 렌더링 억제
classNamestring-툴팁 콘텐츠 추가 CSS 클래스

Events

EventTypeDescription
onOpenChange(open: boolean) => void열림 상태 변경 콜백

기본 사용법

import { Tooltip, Button } from "@vortex/ui-icignal"
 
<Tooltip trigger={<Button variant="outline">저장</Button>}>
  변경 사항을 저장합니다.
</Tooltip>

접근성

ARIA 속성

Base UI Tooltip이 자동으로 제공합니다:

// 트리거와 콘텐츠가 aria-describedby로 자동 연결
// role="tooltip" 자동 적용
<Tooltip trigger={<Button>저장</Button>}>변경 사항을 저장합니다.</Tooltip>

권장 사항

  • ✅ 툴팁은 짧고 간결한 보조 설명으로 사용
  • ✅ 아이콘 버튼처럼 텍스트 레이블이 없는 요소에 우선 적용
  • ✅ 키보드 포커스 시에도 툴팁 표시 (자동)
  • ❌ 상호작용이 필요한 콘텐츠는 Tooltip 대신 Popover 사용

관련 컴포넌트

Last updated on
ToggleGroupTree