Tooltip

Contextual help text that appears on hover or focus. Perfect for explaining icons, truncated text, or providing additional context.

Setup

import { Tooltip } from '@fragments-sdk/ui';

Loading preview...

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
`closeOnClick`	`boolean`	`false`	Whether clicking the trigger closes the tooltip.
`contentProps`	`object`	Not set	Props forwarded to the tooltip popup element (preferred way to pass popup attrs/className/style)
`style`	`object`	Not set	—

Keep tooltip text concise (under 80 characters)
Use sentence case, no period for single sentences
Avoid duplicating visible label text
Consider mobile users who cannot hover
Use contentProps for tooltip popup attributes/styling; top-level HTML attrs are applied to the popup for backward compatibility

Accessibility