---
title: "Add a tooltip UI component to your Editor"
description: "Add a small informational popup that appears when hovering over an element. More in the docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/tooltip"
---

# Add a tooltip UI component to your Editor

Add a small informational popup that appears when hovering over an element. More in the docs!

A small informational popup that appears when hovering over an element.

> **Interactive demo:** [tooltip](https://template.tiptap.dev/preview/tiptap-ui-primitive/tooltip)

## Install

You can add the primitive via Tiptap CLI

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

## Usage

```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/tiptap-ui-primitive/tooltip'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button data-style="ghost">Hover Me</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Tooltip content</p>
      </TooltipContent>
    </Tooltip>
  )
}
```

## Props

### Tooltip

| Name              | Type                    | Default   | Description                             |
| ----------------- | ----------------------- | --------- | --------------------------------------- |
| open              | boolean                 | undefined | Controlled open state                   |
| onOpenChange      | (open: boolean) => void | undefined | Callback when open state changes        |
| defaultOpen       | boolean                 | false     | Default open state                      |
| delayDuration     | number                  | 300       | Delay before tooltip appears (ms)       |
| skipDelayDuration | number                  | 300       | Skip delay when moving between tooltips |

### TooltipTrigger

| Name    | Type    | Default | Description                       |
| ------- | ------- | ------- | --------------------------------- |
| asChild | boolean | false   | Whether to merge props with child |

### TooltipContent

| Name  | Type                                   | Default  | Description                       |
| ----- | -------------------------------------- | -------- | --------------------------------- |
| side  | 'top' \| 'right' \| 'bottom' \| 'left' | 'top'    | Preferred side to display content |
| align | 'start' \| 'center' \| 'end'           | 'center' | Alignment along the edge          |