Tooltip

간단한 정보를 표시하는 툴팁 컴포넌트입니다.

개요

Tooltip은 요소에 마우스를 올렸을 때 설명을 표시하는 컴포넌트입니다. iCignal Tooltip은 iCignal 브랜드 스타일이 적용되어 있으며, 대시보드 아이콘과 데이터 레이블에 간결한 설명을 제공합니다. Foundation Tooltip의 모든 기능을 상속합니다.

주요 특징:

호버 시 표시
위치 자동 조정
지연 시간 설정
iCignal 브랜드 스타일

사용 사례:

iCignal 대시보드 아이콘 설명
차트 데이터 포인트 정보
버튼 기능 안내
약어 풀이

알림: 이 컴포넌트는 현재 구현 중입니다.

설치


# Coming Soon
# npx @vortex/cli add tooltip --package icignal

기본 사용법


import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Tooltip, TooltipTrigger, TooltipContent } from "@vortex/ui-icignal";
import { Button } from "@vortex/ui-icignal";
 
export default function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button>Hover me</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>툴팁 내용</p>
      </TooltipContent>
    </Tooltip>
  );
}

iCignal 브랜딩

iCignal 특화 사용 가이드

대시보드 아이콘 설명:


import { Tooltip, TooltipTrigger, TooltipContent } from "@vortex/ui-icignal";
import { RefreshCw, Download, Filter } from "lucide-react";
 
<div className="flex gap-sm">
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="sm">
        <RefreshCw size={16} />
      </Button>
    </TooltipTrigger>
    <TooltipContent>데이터 새로고침</TooltipContent>
  </Tooltip>
 
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="sm">
        <Download size={16} />
      </Button>
    </TooltipTrigger>
    <TooltipContent>데이터 내보내기</TooltipContent>
  </Tooltip>
 
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="sm">
        <Filter size={16} />
      </Button>
    </TooltipTrigger>
    <TooltipContent>필터 설정</TooltipContent>
  </Tooltip>
</div>;

차트 데이터 설명:


import { Tooltip, TooltipTrigger, TooltipContent } from "@vortex/ui-icignal";
import { Info } from "lucide-react";
 
<div className="flex items-center gap-xs">
  <span className="text-2xl font-bold">3.24%</span>
  <Tooltip>
    <TooltipTrigger>
      <Info size={14} className="text-gray-400" />
    </TooltipTrigger>
    <TooltipContent>전환율: 방문자 중 구매한 비율</TooltipContent>
  </Tooltip>
</div>;

Foundation과의 차이점

속성	Foundation	iCignal
스타일	중립적	iCignal 브랜드
사용 맥락	범용	Analytics UI 설명
테마	중립적 테마	iCignal 테마 (`@vortex/ui-icignal/theme`)

Props API

Prop	Type	Default	Description
side	’top’ \| ‘right’ \| ‘bottom’ \| ‘left'	'top’	표시 위치
delayDuration	number	0	지연 시간 (ms)