Components

Tooltip

A hover/focus tooltip — a token-styled wrapper over Base UI's Tooltip that collapses the Root/Trigger/Portal/Positioner/Popup anatomy into one ergonomic call: content is data, the trigger is children. Use it for supplementary hints only — never put essential or interactive content in a tooltip (it's not reachable on touch).

Install

npx shadcn@latest add @alix/tooltip

Preview

Usage

<Tooltip content="Export to CSV">
  <IconButton aria-label="Export"><Download /></IconButton>
</Tooltip>

Examples

Icon button hints

Tooltips add a short visible hint for icon-only controls without changing the IconButton contract.

<Tooltip content="Download report">
  <IconButton variant="outline" aria-label="Download report"><Download /></IconButton>
</Tooltip>
<Tooltip content="Workspace settings">
  <IconButton variant="ghost" aria-label="Workspace settings"><Settings2 /></IconButton>
</Tooltip>

Side placement

Use side when a dense toolbar or panel edge needs the tooltip to open away from nearby content.

<Tooltip content="Opens above" side="top">
  <Button variant="outline">Top</Button>
</Tooltip>
<Tooltip content="Opens right" side="right">
  <Button variant="outline">Right</Button>
</Tooltip>
<Tooltip content="Opens below" side="bottom">
  <Button variant="outline">Bottom</Button>
</Tooltip>
<Tooltip content="Opens left" side="left">
  <Button variant="outline">Left</Button>
</Tooltip>

Toolbar help

Inline, Button, IconButton, and Tooltip form a compact toolbar where only the helper action needs hover copy.

<Inline gap="sm">
  <Button variant="outline" leftIcon={<Download />}>Export</Button>
  <Tooltip content="How export permissions are applied">
    <IconButton variant="ghost" aria-label="Explain export permissions"><Info /></IconButton>
  </Tooltip>
</Inline>

When to use it

Use it for

Short supplementary hints for icon buttons, terse toolbar controls, or compact panel actions.
Hover and focus affordances where the visible control already has an accessible name.
Placement adjustments near panel edges or dense toolbars.

Reach for something else

Essential labels or instructions users must read — use visible Button text or Field description instead.
Paragraphs, forms, or dismissible contextual content — use Popover instead.
Command lists or links — use Menu instead.

Props

Prop	Type	Default	Description
content	ReactNode	—	Tooltip body. Keep it short — a label or a one-line hint, not a paragraph.
children	React.ReactElement	—	The hover/focus target — a single element (a Button, an icon button, a link), rendered through Base UI's render so no wrapper element is added.
side	"top" \| "right" \| "bottom" \| "left"	"top"	Preferred side; flips automatically when there isn't room.
delay	number	300	Open delay in ms.