Tooltip | Fragments

Preview

<Tooltip content="Save your changes">
  <Button>Save</Button>
</Tooltip>

Installation

npx @usefragments/cli add tooltip

Writes src/fragments/ui/components/Tooltip plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Tooltip is a compound: import the root and reach its parts through dot notation.

Tooltip.Provider

Examples

Positions

Four sides; it flips if the edge is too close.

import { Stack } from '@/components/Stack';

<Stack direction="row" gap="md" align="center" wrap>
  <Tooltip content="Top tooltip" side="top">
    <Button variant="soft">Top</Button>
  </Tooltip>

With Shortcut

Spells out the key combination the icon implies.

<Tooltip content="Undo (Ctrl+Z)">
  <Button variant="ghost">Undo</Button>
</Tooltip>

No Arrow

Drops the pointer for tooltips packed into dense chrome.

<Tooltip content="No arrow on this one" arrow={false}>
  <Button variant="soft">Arrowless</Button>
</Tooltip>

With Content Props

contentProps lands on the popup element itself.

<Tooltip
  content="Styled through contentProps"
  contentProps={{ id: 'custom-tooltip-popup' }}
>
  <Button variant="soft">Custom popup</Button>
</Tooltip>

API

Component props
Prop	Type	Default	Description
`children`Required	`element`	Not set	The element that triggers the tooltip
`content`Required	`node`	Not set	Content to display in the tooltip
`side`	`enumtopbottomleftright`	`top`	Which side to show the tooltip
`align`	`enumstartcenterend`	`center`	Alignment along the side
`sideOffset`	`number`	`6`	Distance from trigger in pixels
`delay`	`number`	`400`	Delay before showing (ms)
`closeDelay`	`number`	`0`	Delay before hiding (ms)
`disabled`	`boolean`	`false`	Disable the tooltip
`arrow`	`boolean`	`true`	Show arrow pointing to trigger
`open`	`boolean`	Not set	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state
`onOpenChange`	`function`	Not set	Callback when open state changes
`contentProps`	`object`	Not set	Props forwarded to the tooltip popup element (preferred way to pass popup attrs/className/style)
`style`	`object`	Not set	—
`closeOnClick`	`boolean`	`false`	Whether clicking the trigger closes the tooltip.

Accessibility

Opens on keyboard focus, not only hover
The open delay stops tooltips flashing while the pointer crosses the screen
Do not put anything critical here — treat it as a hint, not a label

Guidance

Use when

Naming icon-only buttons
Showing text that had to be truncated
Surfacing a keyboard shortcut
One line of help, no more

Avoid when

Help longer than a line — use Popover
Anything the user must not miss — use Alert
Content they need to click — use Popover or Menu
Touch-first screens, where there is no hover

PopoveralternativeUse Popover for interactive or longer content
AlertalternativeUse Alert for critical information that must be visible

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.