Tooltip

uistable

Tooltip — extracted 1:1 from WEM-App.

npx shadcn add @krawma/tooltip

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States

openclosed

Keyboard

Escape

Depends on

utils

Purpose

A brief text hint shown on hover/focus of a control — usually to label an icon-only button or clarify an affordance. Text only, non-interactive. For rich previews use hover-card; for interactive content use popover.

Anatomy

TooltipProvider (once, near the app root) › Tooltip › TooltipTrigger (wrap the target, often asChild) › TooltipContent.

Style

No variants — small portalled token-backed bubble with an arrow.

Behavior & functionality

Opens on pointer hover and on keyboard focus of the trigger, after a short delay; Escape dismisses. Never contains focusable/interactive content.

Accessibility

A tooltip supplements an accessible name — it must not be the only label for an interactive control; icon-only buttons still need aria-label.
Must appear on focus, not just hover, so keyboard users get it.

Do / Don't

✅ Use to explain an icon-only control (plus a real aria-label).
❌ Don't put links/buttons inside — use popover/hover-card.