Tooltip

Betav1.0.0

hover/focus 시 표시되는 짧은 정보 팝업.

Loading…

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</TooltipProvider>

Installation

pnpm dlx @groudit/cli@latest add tooltip

Composition

TooltipProvider
└── Tooltip
    ├── TooltipTrigger
    └── TooltipContent

Accessibility

이 컴포넌트는 WAI-ARIA tooltip 패턴을 따릅니다.

Keyboard interactions

Key	Description
`Tab → focus`	포커스 시 자동 표시.
`Esc`	툴팁 숨김.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 1.4.13

Notes

•툴팁만으로 핵심 정보 전달 X — 보조 정보용.