# Tooltip

A floating label that appears on hover or focus, with directional slide animations and an arrow pointer.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="tooltip">
      <TooltipDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="tooltip">
      <TooltipDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="tooltip">
      <TooltipDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="tooltip">
      <TooltipDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## With asChild [#with-aschild]

Wrap any element in `TooltipTrigger asChild` to attach the tooltip without an extra DOM node. Always use `asChild` on interactive elements like `Button`.

```tsx
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon" aria-label="Settings">
      <SettingsIcon />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Settings</TooltipContent>
</Tooltip>
```

## Side [#side]

```tsx
<TooltipContent side="top" />    {/* default */}
<TooltipContent side="right" />
<TooltipContent side="bottom" />
<TooltipContent side="left" />
```

## With keyboard shortcut [#with-keyboard-shortcut]

Combine with `Kbd` inside `TooltipContent` for a shortcut hint.

```tsx
<TooltipContent className="flex items-center gap-2">
  New item
  <Kbd>⌘K</Kbd>
</TooltipContent>
```

## Delay [#delay]

The default `delayDuration` is `0`. Wrap in `TooltipProvider` to set a custom delay for a group.

```tsx
<TooltipProvider delayDuration={300}>
  <Tooltip>…</Tooltip>
  <Tooltip>…</Tooltip>
</TooltipProvider>
```

## Controlled [#controlled]

```tsx
<Tooltip open={open} onOpenChange={setOpen}>
  …
</Tooltip>
```

## Props [#props]

### TooltipContent [#tooltipcontent]

| Prop         | Type                                     | Default    | Description                           |
| ------------ | ---------------------------------------- | ---------- | ------------------------------------- |
| `side`       | `"top" \| "right" \| "bottom" \| "left"` | `"top"`    | Preferred side                        |
| `sideOffset` | `number`                                 | `0`        | Gap between trigger and tooltip       |
| `align`      | `"start" \| "center" \| "end"`           | `"center"` | Alignment along the side              |
| `hidden`     | `boolean`                                | `false`    | Hides the content while keeping mount |

### Tooltip (Root) [#tooltip-root]

| Prop            | Type                      | Default | Description                              |
| --------------- | ------------------------- | ------- | ---------------------------------------- |
| `open`          | `boolean`                 | —       | Controlled open state                    |
| `defaultOpen`   | `boolean`                 | `false` | Uncontrolled initial state               |
| `onOpenChange`  | `(open: boolean) => void` | —       | Callback on state change                 |
| `delayDuration` | `number`                  | `0`     | Override provider delay for this tooltip |

## Usage [#usage]

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

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon" aria-label="Add">
      <PlusIcon />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Add item</TooltipContent>
</Tooltip>
```

## Specs [#specs]

```md
# Mint — Tooltip Specs

## Component
- name: tooltip
- file: registry/mint/tooltip.tsx
- installs to: components/ui/tooltip.tsx
- dependencies: radix-ui
- registryDependencies: none

## What is it
A floating label that appears on hover or focus to provide supplemental context
for an element. Use it to clarify icon-only buttons, truncated text, or
non-obvious controls. Do not use it to convey information required to complete
a task — that content belongs in the UI, not a tooltip.

## Visual identity
Solid medium-green fill (--primary) with white text gives a high-contrast,
unambiguous callout with a fresh Mint accent. Slightly rounded corners
(rounded-md) and compact padding (px-3 py-1.5) keep it dense and lightweight.
A small rotated square arrow anchors the tooltip to its trigger.

## Design tokens
--primary: oklch(0.5 0.14 155) / oklch(0.62 0.15 155)           — tooltip background
--primary-foreground: oklch(1 0 0) / oklch(0.1 0 0) — tooltip text

## Sub-components
- TooltipProvider  → Radix Provider; sets delayDuration (default 0) for a group
- Tooltip          → wraps TooltipProvider + Radix Root; self-contained by default
- TooltipTrigger   → Radix Trigger; use asChild for interactive elements
- TooltipContent   → Radix Portal + Content; renders the floating label and arrow

## States
- open:   animate-in fade-in-0 zoom-in-95 + directional slide-in-from-opposite-side-2
- closed: animate-out fade-out-0 zoom-out-95 + directional slide-out-to-opposite-side-2

## Conventions
- Each Tooltip auto-wraps in TooltipProvider (delayDuration=0); no manual provider needed for single tooltips
- Wrap multiple Tooltip instances in a shared TooltipProvider to set a common delayDuration or skipDelayDuration
- Always use TooltipTrigger asChild on interactive elements (Button, anchor) to avoid a nested focusable element
- Icon-only buttons must have an aria-label; the tooltip text may duplicate it for visual users
- Kbd inside TooltipContent adapts automatically via data-[slot=tooltip-content]: inverted colour classes
- Sub-components expose data-slot="tooltip-provider", "tooltip", "tooltip-trigger", "tooltip-content" for CSS targeting
```

## Installation [#installation]

<CommandBox componentName="tooltip" className="mt-2" />