Tooltip

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@aspyn-io/kit";

Basic

Wrap your app (or a section) in TooltipProvider once — every Tooltip inside shares its 200ms default delay.

// app/layout.tsx (once)
<TooltipProvider>{children}</TooltipProvider>

// anywhere below
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon" aria-label="Sync now">
      <RefreshIcon />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Sync now</TooltipContent>
</Tooltip>

Placement

<TooltipContent side="right" sideOffset={8}>Appears to the right</TooltipContent>

Notes

• Tooltips require a TooltipProvider ancestor — without it, nothing renders. Put one in your root layout.
• Triggers must be focusable so keyboard users get the hint too; asChild on a Button handles this.
• Never put interactive content in a tooltip — use Popover for that.