# Tooltip

A label-maker strip: dark embossing tape with raised pale letters and a tab pointing at the trigger. It feeds out a short way from the trigger's side; in a group, the next one prints at once.

- Category: Essentials
- Docs: https://bevel-ui.vercel.app/components/tooltip
- Import from: `@/components/ui/tooltip`

## Install

```bash
npx shadcn@latest add @bevel/tooltip
```

npm dependencies (installed by the CLI): `@base-ui/react`, `cn`.

## Anatomy

```tsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger aria-label="Copy link" />
    <TooltipContent>Copy link</TooltipContent>
  </Tooltip>
</TooltipProvider>
```

## Parts

| Part | Renders | Description |
| --- | --- | --- |
| `TooltipProvider` | Tooltip provider | Shares the open delay (delay, default 400ms; closeDelay). Once one tooltip shows, the next opens instantly and without animation. |
| `Tooltip` | Tooltip root | One trigger and its label. open, defaultOpen, onOpenChange, disabled. |
| `TooltipTrigger` | button | Opens on hover and keyboard focus. Give an icon-only trigger an aria-label; pass render to use your own button. |
| `TooltipContent` | Tooltip popup | The tape, with its tab. tone: black (default), red, blue. side, align, sideOffset, alignOffset. Text prints in capitals; keep it to a few words. |

## Example: Icon buttons

An editor toolbar. Hover one button and slide along: each label prints at once.

```tsx
"use client"

import { Bold, Code, Italic, Link, Strikethrough } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

const tools = [
  { label: "Bold", keys: "⌘B", shortcut: "Meta+B", icon: Bold },
  { label: "Italic", keys: "⌘I", shortcut: "Meta+I", icon: Italic },
  { label: "Strikethrough", keys: "⌘⇧X", shortcut: "Meta+Shift+X", icon: Strikethrough },
  { label: "Inline code", keys: "⌘E", shortcut: "Meta+E", icon: Code },
  { label: "Add link", keys: "⌘K", shortcut: "Meta+K", icon: Link },
]

/** An editor toolbar. Hover one button, then slide along: the next label prints at once. */
export function TooltipToolbar() {
  return (
    <TooltipProvider>
      <div
        role="toolbar"
        aria-label="Formatting"
        className="flex items-center gap-0.5 rounded-(--bevel-radius-md) border bg-background p-1 shadow-xs"
      >
        {tools.map(({ label, keys, shortcut, icon: Icon }) => (
          <Tooltip key={label}>
            <TooltipTrigger
              aria-label={label}
              aria-keyshortcuts={shortcut}
              className="inline-flex size-8 items-center justify-center rounded-(--bevel-radius-sm) text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
            >
              <Icon className="size-4" aria-hidden />
            </TooltipTrigger>
            <TooltipContent>
              {label} <span className="opacity-70">{keys}</span>
            </TooltipContent>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  )
}
```

## Example: Sides and tapes

Each label feeds out from its own side. Red and blue tape are for the label that must stand out.

```tsx
"use client"

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

const key =
  "inline-flex h-8 items-center justify-center rounded-(--bevel-radius-sm) border bg-background px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"

/** Black tape for everyday labels; red and blue for the one that must stand out. Each feeds out from its own side. */
export function TooltipTapes() {
  return (
    <div className="grid grid-cols-2 gap-3 sm:flex sm:flex-wrap sm:justify-center">
      <Tooltip>
        <TooltipTrigger className={key}>Top</TooltipTrigger>
        <TooltipContent side="top">Saved 2 min ago</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger className={key}>Bottom</TooltipTrigger>
        <TooltipContent side="bottom">Shared with 4 people</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger className={key}>Red tape</TooltipTrigger>
        <TooltipContent tone="red">Deletes for everyone</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger className={key}>Blue tape</TooltipTrigger>
        <TooltipContent tone="blue" side="right">
          New
        </TooltipContent>
      </Tooltip>
    </div>
  )
}
```