Tooltip

필수 래퍼: TooltipProvider — delayDuration(기본 0ms) 전역 관리. 앱 루트 또는 개별 래핑
슬롯: TooltipProvider · Tooltip · TooltipTrigger · TooltipContent
Trigger 대상: 이름 없는 icon-only 컨트롤에만 부착합니다. 명시적 label이 있는 button에는 부착하지 않습니다(중복).
콘텐츠: 텍스트 전용 · 짧게 · 비인터랙티브 — 링크/버튼/폼 불가
반전 서피스: `foreground` bubble과 `background` text로 페이지 표면과 대비를 만듭니다.
모바일 클릭: 데스크톱 hover/focus와 모바일 click/touch를 모두 기본 지원합니다. 데스크톱 hover-only로 제한하려면 `enableTouch={false}`를 적용합니다.
접근성 연결: Radix Tooltip이 `role="tooltip"` + `aria-describedby`를 자동 연결합니다. 키보드 focus로 trigger, Esc로 dismiss됩니다. HTML `title` 속성은 사용하지 않습니다.

아이콘 전용 버튼에 짧은 label 제공

코드 보기tsx

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@olundot/ui";
import { IconButton } from "@olundot/ui";
import { Info, BellRing } from "lucide-react";

// Tooltip은 아이콘 전용 컨트롤의 보조 label에 사용합니다.
// 이미 label이 보이는 버튼에는 중복으로 붙이지 않습니다.
// TooltipProvider는 delayDuration 전역 관리 컨텍스트.
export function TooltipBasic() {
  return (
    <TooltipProvider delayDuration={300}>
      <div style={{ display: "flex", gap: "4px", flexWrap: "wrap" }}>
        <Tooltip>
          <TooltipTrigger asChild>
            <IconButton aria-label="응시 전 점검 사항" variant="ghost" size="md" icon={Info} />
          </TooltipTrigger>
          <TooltipContent>응시 전 점검 사항</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <IconButton aria-label="알림 설정" variant="ghost" size="md" icon={BellRing} />
          </TooltipTrigger>
          <TooltipContent>알림 설정</TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

도움말 아이콘에 한 문장 설명 제공

코드 보기tsx

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@olundot/ui";
import { IconButton } from "@olundot/ui";
import { HelpCircle } from "lucide-react";

// 설명형 Tooltip: 한 문장 도움말을 제공합니다.
// HelpCircle('?') icon — '더 알아보기' 의도에 사용.
export function TooltipDescription() {
  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>
          <IconButton aria-label="추가 정보" variant="ghost" size="md" icon={HelpCircle} />
        </TooltipTrigger>
        <TooltipContent>응시 전 안정적인 네트워크 환경을 확인하세요</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

설정 버튼에 단축키 힌트 제공

코드 보기tsx

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@olundot/ui";
import { IconButton } from "@olundot/ui";
import { Settings } from "lucide-react";

// 단축키 힌트는 Tooltip copy 안에 짧게 포함합니다.
export function TooltipKeyboard() {
  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>
          <IconButton aria-label="설정" variant="ghost" size="md" icon={Settings} />
        </TooltipTrigger>
        <TooltipContent>설정 열기 (Cmd+,)</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

비활성 아이콘 버튼에 사용 불가 사유 제공

코드 보기tsx

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@olundot/ui";
import { IconButton } from "@olundot/ui";
import { Info } from "lucide-react";

// 비활성 컨트롤 Tooltip: 비활성 상태의 이유를 보충합니다.
// disabled 상태에서도 Tooltip은 hover/focus 표시 — Radix 자동 처리.
export function TooltipDisabledControl() {
  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>
          <IconButton
            aria-label="응시 기록 내보내기"
            variant="ghost"
            size="md"
            icon={Info}
            disabled
          />
        </TooltipTrigger>
        <TooltipContent>응시 종료 후 사용 가능합니다</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

기본 (Label)

설명형

단축키 힌트

비활성 사유