# Tooltip

> A small label on hover or focus, with a delay that respects intent.

Component · Free · https://lodeui.com/components/tooltip

## When to use

- Naming icon-only buttons and showing their shortcuts.

## When not to use

- Essential information: put it in the UI.
- Interactive content: use a popover.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/tooltip.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Bold } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export function BoldButton() {
  return (
    <Tooltip content="Bold ⌘B">
      <Button size="icon" variant="ghost" aria-label="Bold"><Bold /></Button>
    </Tooltip>
  );
}
```

## API reference

### Tooltip

Wraps one element; shows on hover after a delay and immediately on keyboard focus.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | `ReactNode` | – | Tooltip text. |
| children | `ReactElement` | – | The trigger; handlers and aria-describedby are added to it. |
| side | `"top" \| "bottom"` | `"top"` | Placement. |
| delay | `number` | `350` | Hover delay in ms. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focus shows the tooltip |
| Esc | Hide it |

## Accessibility

- role="tooltip" linked to the trigger with aria-describedby.
- The trigger still needs its own aria-label; the tooltip describes, it doesn't name.

## Motion

- Scales in from the side it points to (stiffness 600).

## Responsive behavior

- Touch devices don't hover, so don't hide anything important in a tooltip.

## Performance

- Rendered only while open.

## Notes for AI

- Never wrap disabled buttons; they don't fire pointer events.

## Related

- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.