# Tooltip

> Contextual hint on hover or focus.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/tooltip.json`

## Install

```tsx
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.

```tsx
// 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

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

### With keyboard shortcut

Pair the label with a Kbd so users learn the shortcut alongside the action.

```tsx
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Search</Button>
  </TooltipTrigger>
  <TooltipContent className="flex items-center gap-2">
    Search
    <Kbd>⌘K</Kbd>
  </TooltipContent>
</Tooltip>
```

### On a disabled trigger

Disabled elements don't fire pointer events, so wrap them in a focusable span (tabIndex={0}) and point the trigger at that.

```tsx
<Tooltip>
  <TooltipTrigger asChild>
    <span tabIndex={0}>
      <Button disabled className="pointer-events-none">
        Publish
      </Button>
    </span>
  </TooltipTrigger>
  <TooltipContent>Resolve all errors before publishing</TooltipContent>
</Tooltip>
```

## 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.