> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Tooltip

A short label on hover or focus, for naming something the interface cannot afford to spell out — an icon button, a truncated value. It holds no interactive content and cannot be reached by keyboard beyond its trigger, so anything the reader needs to click belongs in a `Popover`.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Tooltip) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/overlay-tooltip--overview)

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { ChevronRight } from '@wallarm-org/design-system/icons';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const Basic = () => (
  <Tooltip data-testid='tooltip'>
    <TooltipTrigger asChild>
      <Button variant='outline' color='neutral'>
        <ChevronRight />
      </Button>
    </TooltipTrigger>
    <TooltipContent>Right</TooltipContent>
  </Tooltip>
);
```

## Usage

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { ChevronRight } from '@wallarm-org/design-system/icons';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';
```

## Examples

### With description

A second line for a consequence rather than a name. This is the ceiling — past it, the
content wants a `Popover`.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { ChevronRight } from '@wallarm-org/design-system/icons';
import { Text } from '@wallarm-org/design-system/Text';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const WithDescription = () => (
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant='outline' color='neutral'>
        <ChevronRight />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <Text size='xs' weight='medium'>
        Title
      </Text>
      <Text size='xs'>Description</Text>
    </TooltipContent>
  </Tooltip>
);
```

### With nested dialog

A tooltip on a trigger that also opens a dialog, checking the tooltip dismisses rather than
hanging over the panel.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@wallarm-org/design-system/Dialog';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const WithNestedDialog = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant='outline' color='neutral'>
        Open dialog with nested tooltip
      </Button>
    </DialogTrigger>

    <DialogContent>
      <DialogHeader>
        <DialogTitle>[Level 1] Main Dialog</DialogTitle>
      </DialogHeader>

      <DialogBody>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant='ghost' color='neutral' size='small'>
              Open nested dialog
            </Button>
          </DialogTrigger>

          <DialogContent>
            <DialogHeader>
              <DialogTitle>[Level 2] With Tooltip</DialogTitle>
            </DialogHeader>

            <DialogBody>
              <Tooltip data-testid='nested-tooltip' interactive>
                <TooltipTrigger asChild>
                  <Button variant='outline' color='neutral'>
                    Hover me
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Tooltip above the dialog</TooltipContent>
              </Tooltip>
            </DialogBody>
          </DialogContent>
        </Dialog>
      </DialogBody>
    </DialogContent>
  </Dialog>
);
```

### With kbd

A `Kbd` inside the tooltip, which is the convention for naming a control and its shortcut in
one breath.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { ChevronRight } from '@wallarm-org/design-system/icons';
import { Kbd } from '@wallarm-org/design-system/Kbd';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const WithKbd = () => (
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant='outline' color='neutral'>
        <ChevronRight />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      Add instance <Kbd>⌘</Kbd>
    </TooltipContent>
  </Tooltip>
);
```

## Props

| Prop               | Type                                     | Default | Description                                                                                                                                                                                                                                                                                                                                           |
| ------------------ | ---------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| open               | `boolean \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                                                       |
| defaultOpen        | `boolean \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                                                       |
| onOpenChange       | `((open: boolean) => void) \| undefined` |         |                                                                                                                                                                                                                                                                                                                                                       |
| openDelay          | `number \| undefined`                    |         |                                                                                                                                                                                                                                                                                                                                                       |
| closeDelay         | `number \| undefined`                    |         |                                                                                                                                                                                                                                                                                                                                                       |
| closeOnPointerDown | `boolean \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                                                       |
| closeOnEscape      | `boolean \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                                                       |
| closeOnScroll      | `boolean \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                                                       |
| interactive        | `boolean \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                                                       |
| disabled           | `boolean \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                                                       |
| positioning        | `PositioningOptions \| undefined`        |         |                                                                                                                                                                                                                                                                                                                                                       |
| ids                | `ElementIds \| undefined`                |         | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and this tooltip can't find its anchor, mispositioning at the viewport origin. |
| data-testid        | `string \| undefined`                    |         |                                                                                                                                                                                                                                                                                                                                                       |

### TooltipContent

| Prop           | Type                                                 | Default | Description                                                                                         |
| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| title          | `string \| undefined`                                |         |                                                                                                     |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                                     |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                                     |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                                     |
| id             | `string \| undefined`                                |         |                                                                                                     |
| tabIndex       | `number \| undefined`                                |         |                                                                                                     |
| rel            | `string \| undefined`                                |         |                                                                                                     |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                     |
| asChild        | `boolean \| undefined`                               |         | Use the provided child element as the default rendered element, combining their props and behavior. |
| data-testid    | `string \| undefined`                                |         |                                                                                                     |

### TooltipTrigger

| Prop           | Type                                                 | Default | Description                                                                                         |
| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| title          | `string \| undefined`                                |         |                                                                                                     |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                                     |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                                     |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                                     |
| id             | `string \| undefined`                                |         |                                                                                                     |
| tabIndex       | `number \| undefined`                                |         |                                                                                                     |
| rel            | `string \| undefined`                                |         |                                                                                                     |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                     |
| type           | `"button" \| "submit" \| "reset" \| undefined`       |         |                                                                                                     |
| disabled       | `boolean \| undefined`                               |         |                                                                                                     |
| name           | `string \| undefined`                                |         |                                                                                                     |
| value          | `string \| undefined`                                |         | The value that identifies this specific trigger                                                     |
| asChild        | `boolean \| undefined`                               |         | Use the provided child element as the default rendered element, combining their props and behavior. |
| data-testid    | `string \| undefined`                                |         |                                                                                                     |

## Explorer