# Tooltip

> Hover popover on Radix, on the overlay surface like every other overlay. Wrap your app in TooltipProvider once at the root. TooltipShortcut is a Kbd.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/tooltip

## Install

```bash
npx @entrepta/cli@latest add tooltip
```

Files: `primitives/tooltip.tsx`, `primitives/kbd.tsx`, `lib/overlay.ts`.
npm packages: `@radix-ui/react-tooltip`.
Comes with: `kbd`, `overlay-lib`.

## Usage

```tsx
import {
  TooltipProvider, Tooltip, TooltipTrigger,
  TooltipContent, TooltipShortcut,
} from "@/components/entrepta/tooltip"

// In root layout:
<TooltipProvider>
  {children}
</TooltipProvider>

// Usage:
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="sm">⌘K</Button>
  </TooltipTrigger>
  <TooltipContent>
    open command palette <TooltipShortcut>⌘K</TooltipShortcut>
  </TooltipContent>
</Tooltip>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `delayDuration` | `number` | 200 | Delay in ms before tooltip opens (TooltipProvider) |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | "top" | Placement relative to trigger (TooltipContent) |
| `sideOffset` | `number` | 8 | Gap in px from trigger (TooltipContent) |
| `surface` | `"page" \| "dark"` | "page" | page follows the mode of the page it opens over. dark stays near black in both modes (TooltipContent) |