Tooltip

Import

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

Usage Guidelines

When to use

• To provide a brief text label for icon-only buttons or truncated text.
• For supplemental information that isn't essential to the user's task.
• When the trigger element already conveys meaning and the tooltip adds helpful context.

When NOT to use

• For essential information — tooltips are not accessible on touch devices. Put critical content in the UI directly.
• For interactive content (links, buttons, forms) — use Popover instead.
• For rich preview content on hover — use HoverCard instead.

Preview

Usage

Wrap your app (or a section) with TooltipProvider to share delay settings:

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Source