Tooltip

A small overlay that appears on hover or focus to provide supplementary context about its trigger element. Wrap any focusable child and pass label text via content, with an optional delay and keyboard shortcut hint.

1<Tooltip content="Edit document">
2  <Button variant="soft" color="neutral">Hover</Button>
3</Tooltip>
4

Usage

1import { Tooltip } from "atlas";
2
3<Tooltip content="Edit document">
4  <Button>Hover</Button>
5</Tooltip>
6

Examples

Default

The default Tooltip shows a text overlay on hover after a 500 ms delay, aligned to the trigger’s center.

1<Tooltip content="Edit document">
2  <Button variant="soft" color="neutral">Hover</Button>
3</Tooltip>
4

With shortcut

Pass a shortcut string to display a keyboard shortcut hint alongside the tooltip text. Particularly useful for toolbar icon buttons where discoverability matters.

1<Tooltip content="Bold" shortcut="⌘B">
2  <IconButton icon={<IconBold />} variant="ghost" aria-label="Bold" />
3</Tooltip>
4

API Reference

Prop	Type	Default
content	ReactNode	-
shortcut	string	-
delay	number	500
children	ReactElement	-