Tooltip

The Tooltip component displays additional information when a user hovers or focuses on a trigger element.

Usage & Examples

default.tsx


<Tooltip content="Tooltip message" position="top">
  <Button>Hover me</Button>
</Tooltip>

Tooltip props API
				Default	Description
`aria-label`	`string`	No	aria	`—`	Accessible label applied to the tooltip itself. Use when the tooltip needs an explicit accessible name.
`aria-labelledby`	`string`	No	aria	`—`	Accessible labelling reference for the tooltip itself.
`children`	`ReactNode`	Yes	props	`—`	The element that triggers the tooltip.
`className`	`string`	No	styling	`—`	Additional CSS class names for the tooltip wrapper.
`content`	`string`	Yes	props	`—`	The content text displayed inside the tooltip.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Applies a translucent frosted-glass treatment using the active theme palette.
`id`	`string`	No	props	`—`	Optional custom id for the tooltip element. If omitted, a stable generated id is used.
`keepMountedWhenHidden`	`boolean`	No	props	`true`	Whether the tooltip should remain in the accessibility tree when hidden. Defaults to false behavior via aria-hidden.
`position`	`"left" \| "right" \| "top" \| "bottom"`	No	props	`"top"`	The position of the tooltip relative to the target element. "top" \| "bottom" \| "left" \| "right"
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Rounding style of the tooltip. "none" \| "small" \| "medium" \| "large" \| "full"
`shadow`	`ShadowType`	No	styling	`configured default shadow (fallback: "light")`	Shadow style of the tooltip. "none" \| "light" \| "medium" \| "strong" \| "intense"