# Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

> 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).





<ComponentPreview name="tooltip-demo">
  <div className="flex items-center justify-center py-12">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">
            Hover me
          </Button>
        </TooltipTrigger>

        <TooltipContent>
          <span>
            Add to library
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/tooltip.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button>Hover</button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Tooltip text</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}
```

## Examples [#examples]

### Positions [#positions]

<ComponentPreview name="tooltip-positions">
  <div className="flex items-center justify-center gap-4 py-12">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">
            Top
          </Button>
        </TooltipTrigger>

        <TooltipContent side="top">
          <span>
            Top tooltip
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>

    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">
            Right
          </Button>
        </TooltipTrigger>

        <TooltipContent side="right">
          <span>
            Right tooltip
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>

    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">
            Bottom
          </Button>
        </TooltipTrigger>

        <TooltipContent side="bottom">
          <span>
            Bottom tooltip
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>

    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">
            Left
          </Button>
        </TooltipTrigger>

        <TooltipContent side="left">
          <span>
            Left tooltip
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</ComponentPreview>

### Rich Content [#rich-content]

<ComponentPreview name="tooltip-rich-content">
  <div className="flex items-center justify-center py-12">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">
            Profile
          </Button>
        </TooltipTrigger>

        <TooltipContent className="p-4 w-64">
          <div className="flex flex-col gap-2">
            <h4 className="font-medium leading-none">
              kuki
            </h4>

            <div className="text-sm text-muted-foreground">
              A developer trying to build a beautiful and modern UI library.
            </div>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</ComponentPreview>

### Icon Trigger [#icon-trigger]

<ComponentPreview name="tooltip-icon">
  <div className="flex items-center justify-center py-12">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline" size="icon" aria-label="Settings">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4">
              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />

              <circle cx="12" cy="12" r="3" />
            </svg>
          </Button>
        </TooltipTrigger>

        <TooltipContent>
          <span>
            Settings
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</ComponentPreview>

### Custom Delay [#custom-delay]

<ComponentPreview name="tooltip-delay">
  <div className="flex items-center justify-center gap-4 py-12">
    <TooltipProvider>
      <Tooltip delayDuration="0">
        <TooltipTrigger>
          <Button variant="outline">
            Instant (0ms)
          </Button>
        </TooltipTrigger>

        <TooltipContent>
          <span>
            I appear immediately
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>

    <TooltipProvider>
      <Tooltip delayDuration="700">
        <TooltipTrigger>
          <Button variant="outline">
            Slow (700ms)
          </Button>
        </TooltipTrigger>

        <TooltipContent>
          <span>
            I took my time
          </span>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The component uses Radix UI Primitives. For a complete API reference, please refer to the [Radix UI Tooltip Documentation](https://www.radix-ui.com/docs/primitives/components/tooltip).

| Prop            | Type     | Default | Description                                                                        |
| --------------- | -------- | ------- | ---------------------------------------------------------------------------------- |
| `delayDuration` | `number` | `700`   | The duration from when the mouse enters a tooltip trigger until the tooltip opens. |
| `side`          | `enum`   | `"top"` | The preferred side of the trigger to render against when open.                     |