Groudit UI

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 shadcn@latest add https://groudit.com/r/tooltip.json

Composition

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

Accessibility

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

Keyboard interactions

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

WCAG 2.1 AA

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

1.3.11.4.13

Notes

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