Hint

The Hint component provides tooltips and hints for other elements. It can be attached to buttons, icons, or any other UI elements to provide additional context or information when users hover over or interact with them.

Playground

Props

Examples

Positions

Shapes

Colors

Long Text with Wrap

Render as Child

By default, the Hint component wraps its children in a <span> element. This can sometimes cause layout issues or invalid HTML nesting (e.g. inside a <button>).

To avoid this, you can use the asChild prop. This will merge the hint’s functionality (classes, aria-label, etc.) directly onto the child element using @radix-ui/react-slot, effectively removing the wrapper.

Props

Prop	Type	Default	Description
`alternateLabel`	`string`	-	An alternate label to show when behaviour involves a state change.
`asChild`	`boolean`	`false`	Merges props onto the child element, removing the wrapper span.
`behaviour`	`HintBehaviour`	`'hidden'`	Controls how and when the hint appears (e.g., `show-on-hover`, `change-on-click`).
`children`	`ReactNode`	-	The element that triggers the hint.
`className`	`string`	-	Additional CSS classes.
`color`	`ThemeColor`	`'black'`	The background color of the hint.
`label`	`string`	-	The text content of the hint.
`position`	`HintPosition`	`'top'`	The position of the hint relative to the child element.
`shape`	`HintShape`	`'round'`	The shape of the hint bubble (`round`, `square`, `oblique`).
`size`	`ThemeSize`	`'normal'`	The size of the hint text.
`wrap`	`boolean`	`false`	If true, the hint text will wrap to fit within the viewport.

Hint

Playground

Examples

Positions

Shapes

Colors

Long Text with Wrap

Render as Child

Props

See also