Tooltip | Arbol UI

Language

Appearance

On an icon button

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

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.

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, which the library’s tests render too.