---
title: Tooltip
description: A popup that appears when an element is hovered or focused, showing a hint for sighted users.
---

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

export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline" />}>Hover me</TooltipTrigger>
      <TooltipPopup>Helpful hint</TooltipPopup>
    </Tooltip>
  );
}
```

## Installation

<ComponentSource name="tooltip" title="components/ui/tooltip.tsx" />

## Usage

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

```tsx
<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>Hover me</TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
```

## Examples

### Hidden arrow

Pass `arrow={false}` to `TooltipPopup` to hide the arrow. Default is `true`.

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

export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline" />}>Hover me</TooltipTrigger>
      <TooltipPopup arrow={false}>Helpful hint</TooltipPopup>
    </Tooltip>
  );
}
```

### Grouped tooltip

The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly. `TooltipProvider` provides a shared delay for multiple tooltips.

```tsx
import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react";

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <ToggleGroup defaultValue={["bold"]} multiple>
        <Tooltip>
          <TooltipTrigger render={<ToggleGroupItem aria-label="Toggle bold" value="bold" />}>
            <IconBold />
          </TooltipTrigger>
          <TooltipPopup>Bold</TooltipPopup>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger render={<ToggleGroupItem aria-label="Toggle italic" value="italic" />}>
            <IconItalic />
          </TooltipTrigger>
          <TooltipPopup>Italic</TooltipPopup>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={<ToggleGroupItem aria-label="Toggle underline" value="underline" />}
          >
            <IconUnderline />
          </TooltipTrigger>
          <TooltipPopup>Underline</TooltipPopup>
        </Tooltip>
      </ToggleGroup>
    </TooltipProvider>
  );
}
```

### Animated tooltip

```tsx
"use client";

import { IconClock, IconHeadphones, IconTrash } from "@tabler/icons-react";

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
  tooltipCreateHandle,
} from "@/components/ui/tooltip";

function HeadphoneContent() {
  return <span>Listen to audio preview</span>;
}

function ClockContent() {
  return <span>Set a timer</span>;
}

function TrashContent() {
  return <span>Delete: This action cannot be undone</span>;
}

const demoTooltip = tooltipCreateHandle<React.ComponentType>();

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <ButtonGroup className="flex *:not-last:rounded-r-none *:not-first:rounded-l-none">
        <TooltipTrigger
          render={<Button variant="outline" />}
          handle={demoTooltip}
          payload={HeadphoneContent}
        >
          <IconHeadphones />
        </TooltipTrigger>
        <TooltipTrigger
          render={<Button variant="outline" />}
          handle={demoTooltip}
          payload={ClockContent}
        >
          <IconClock />
        </TooltipTrigger>
        <TooltipTrigger
          render={<Button variant="outline" />}
          handle={demoTooltip}
          payload={TrashContent}
        >
          <IconTrash />
        </TooltipTrigger>
        <Tooltip handle={demoTooltip}>
          {({ payload: Payload }) => (
            <TooltipPopup>{Payload !== undefined && <Payload />}</TooltipPopup>
          )}
        </Tooltip>
      </ButtonGroup>
    </TooltipProvider>
  );
}
```
````