---
title: "Tooltip"
description: "A short hint that opens when its trigger is hovered or focused. It never opens on touch screens, so the trigger must make sense without it; use InfoTip for explanations people tap to read."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

## On an icon button

```tsx
import { DownloadSimpleIcon } from '@phosphor-icons/react';
import { Button, Tooltip, TooltipTrigger } from '@arbol-ai/ui';

<TooltipTrigger>
  <Button aria-label="Export" size="icon" variant="ghost">
    <DownloadSimpleIcon />
  </Button>
  <Tooltip>Download the contacts as CSV</Tooltip>
</TooltipTrigger>
```

## With a shortcut

```tsx
import { ArchiveIcon } from '@phosphor-icons/react';
import { Button, Kbd, Tooltip, TooltipTrigger } from '@arbol-ai/ui';

<TooltipTrigger>
  <Button aria-keyshortcuts="E" aria-label="Archive" size="icon" variant="outline">
    <ArchiveIcon />
  </Button>
  <Tooltip>
    Archive <Kbd>E</Kbd>
  </Tooltip>
</TooltipTrigger>
```

## Placement

It opens above its trigger by default and flips when there is no room.

```tsx
import { PauseIcon } from '@phosphor-icons/react';
import { Button, Tooltip, TooltipTrigger } from '@arbol-ai/ui';

<TooltipTrigger>
  <Button size="sm" variant="outline">
    <PauseIcon /> Pause the agent
  </Button>
  <Tooltip placement="right">New calls wait until you resume it</Tooltip>
</TooltipTrigger>
```

## Source

The examples above are [`src/components/tooltip/tooltip.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/tooltip/tooltip.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/overlays/tooltip/index.mdx