No Preview

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config.
Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Tooltip

A tooltip displays additional information about another component. The information is displayed above and near the target component.

Default

Name	Description	Default
content*	ReactChild \| ReactNodeArray \| ReactPortal \| ({ as?: "div" \| undefined; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" \| keyof HTMLAttributes<...>> & { ...; } & { ...; }) \| null	-
appearance	The tooltip's visual appearance. * `normal` - Uses the theme's background and text colors. * `inverted` - Higher contrast variant that uses the theme's inverted colors. "normal""inverted"	-
positioning	Configure the positioning of the tooltip PositioningShorthand	-
visible	Control the tooltip's visibility programatically. This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior. If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the trigger (child) element. boolean	-
withArrow	Render an arrow pointing to the target element boolean	-
onVisibleChange	Notification when the visibility of the tooltip is changing ((event: FocusEvent<HTMLElement> \| PointerEvent<HTMLElement>, data: OnVisibleChangeData) => void)	-
showDelay	Delay before the tooltip is shown, in milliseconds. number	-
hideDelay	Delay before the tooltip is hidden, in milliseconds. number	-
relationship*	(Required) Specifies whether this tooltip is acting as the description or label of its trigger element. `label` The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons displaying only an icon, for example. `description` The tooltip sets the trigger's aria-description or aria-describedby attribute. `inaccessible` No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to screen readers, and should only be used if the tooltip's text is available by some other means. "label""description""inaccessible"	-

Stories

Default tooltip

Inverted tooltip

Tooltip pointing to its target

Formatted content

Tooltip pointing to a custom target

Trigger button using a render function

This tooltip describes the button

The visibility of this tooltip is controlled by the parent component

The tooltip only shows if the text is truncated