Tooltip – Once UI

Tooltip is a non-interactive floating container used to communicate short hints or descriptions. It can be rendered manually or combined with a hover/focus trigger component. It is automatically hidden below the m breakpoint.

Tooltip, InfoTip or HoverCard

Tooltip is a short text label on hover or focus, usually set through a component's tooltip prop. InfoTip is an info icon that explains a label or setting in a sentence or two. HoverCard opens a card of rich content, such as a profile or a link preview, next to its trigger. 3.0 plans to consolidate them.

Tooltip

<Tooltip label="Tooltip" />

Icons

Add a leading or trailing icon to reinforce meaning.

Icons

Helpful tip

<Tooltip prefixIcon="info" label="Helpful tip" />

Custom styles

You can override styles using Flex props, style or className.

Custom styles

Helpful tip

<Tooltip prefixIcon="info" label="Helpful tip" background="brand-medium" border="brand-medium" padding="8" />

API reference

	Type	Default
labelrequired The text.	ReactNode	—
prefixIcon Icon before the text.	IconName	—
suffixIcon Icon after the text.	IconName	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—