Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Tooltip
description: Displays contextual information when a user hovers or focuses a trigger.
---

```astro live props={{ name: 'tooltip' }}
---
import { buttonVariants } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
---

<Tooltip>
  <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
    Show Tooltip
  </TooltipTrigger>
  <TooltipContent>Add to project</TooltipContent>
</Tooltip>
```

## Installation

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

## Usage

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

```astro
<Tooltip>
  <TooltipTrigger class="rounded-md border px-3 py-2"
    >Show Tooltip</TooltipTrigger
  >
  <TooltipContent>Add to project</TooltipContent>
</Tooltip>
```

## Composition

Use the following composition to build a `Tooltip`:

```text
Tooltip
├── TooltipTrigger
└── TooltipContent
```

## Examples

```astro live
---
import { buttonVariants } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
---

<div class="flex flex-wrap items-center gap-3">
  <Tooltip side="top">
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Top
    </TooltipTrigger>
    <TooltipContent>Top tooltip</TooltipContent>
  </Tooltip>

  <Tooltip side="right">
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Right
    </TooltipTrigger>
    <TooltipContent>Right tooltip</TooltipContent>
  </Tooltip>

  <Tooltip side="bottom">
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Bottom
    </TooltipTrigger>
    <TooltipContent>Bottom tooltip</TooltipContent>
  </Tooltip>

  <Tooltip side="left">
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Left
    </TooltipTrigger>
    <TooltipContent>Left tooltip</TooltipContent>
  </Tooltip>
</div>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/tooltip) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/tooltip/README.md) for more information on interactivity.