Tooltip

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

라이브 (Info/Bell icon + 짧은 label — NN/g 표준: unlabeled icon에만 Tooltip)

코드 보기tsx

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

// NN/g: Tooltip은 unlabeled icon-only control에 text alternative 제공 목적.
// Button(labeled)에 Tooltip 부착 금지 — redundancy.
// 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>
  );
}

라이브 (HelpCircle icon + 1 문장 설명 — 맥락 보충용)

코드 보기tsx

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

// description variant: 1 문장 설명 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>
  );
}

라이브 (Settings icon + 단축키 정보 — shortcut discovery)

코드 보기tsx

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

// keyboard variant: 단축키 힌트 포함 Tooltip.
// Settings icon + Cmd+, — 단축키 발견성(shortcut discovery) 보완.
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>
  );
}

라이브 (disabled IconButton + 비활성 사유 Tooltip — WCAG 2.1)

코드 보기tsx

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

// disabled-control variant: 비활성 상태의 이유를 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)

설명형 (Description)

단축키 힌트 (Keyboard)

비활성 사유 (Disabled control)