Primitive · CLI

Tooltip

Fast tooltip with micro appear motion and reduced-motion respect.

Preview

npx shadcn@latest add @atroui/tooltip

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/tooltip

Source lands in your repo. Installation · Registry

Usage

Tooltips carry a short label or hint — never critical instructions. Wrap a tree in TooltipProvider once.

tsx

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" size="sm" />}>Hover</TooltipTrigger>
    <TooltipContent>Short hint</TooltipContent>
  </Tooltip>
</TooltipProvider>

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" size="sm" />}>Hover</TooltipTrigger>
    <TooltipContent>Short hint</TooltipContent>
  </Tooltip>
</TooltipProvider>