Docs/Tooltip

Tooltip

Hover tooltip with inverted colors.

Usage

tsx

1import { Tooltip, TooltipTrigger, TooltipContent } from '@storm-ds/ui'
2
3<Tooltip>
4  <TooltipTrigger>
5    <Button>Hover me</Button>
6  </TooltipTrigger>
7  <TooltipContent>Tooltip text</TooltipContent>
8</Tooltip>

Default

Positions

tsx

1<Tooltip>
2  <TooltipTrigger><Button>Top</Button></TooltipTrigger>
3  <TooltipContent side="top">Top tooltip</TooltipContent>
4</Tooltip>
5
6<Tooltip>
7  <TooltipTrigger><Button>Bottom</Button></TooltipTrigger>
8  <TooltipContent side="bottom">Bottom tooltip</TooltipContent>
9</Tooltip>
10
11<Tooltip>
12  <TooltipTrigger><Button>Left</Button></TooltipTrigger>
13  <TooltipContent side="left">Left tooltip</TooltipContent>
14</Tooltip>
15
16<Tooltip>
17  <TooltipTrigger><Button>Right</Button></TooltipTrigger>
18  <TooltipContent side="right">Right tooltip</TooltipContent>
19</Tooltip>

Note

Tooltip provides styled markup with role="tooltip" and inverted colors. For hover show/hide behavior, manage visibility in a client component wrapper.

Props

Prop	Type	Default	Description
className	string	-	Custom classes on any sub-component
side	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Tooltip position relative to trigger

Use with AI

Create a Next.js component using Storm UI's Tooltip. Import: `import { Tooltip, TooltipTrigger, TooltipContent } from '@storm-ds/ui'`. Provides styled markup with role="tooltip" and inverted colors. Use the `side` prop on TooltipContent to control position: top, bottom, left, right. Manage hover visibility in client component. Example: `<Tooltip><TooltipTrigger><Button>Hover</Button></TooltipTrigger><TooltipContent side="bottom">Tooltip text</TooltipContent></Tooltip>`

Sonner

Sheet