Skip to content
TrademarkTrademark
Docs
Components

InfoTip

Updated: October 11, 2026
View on GitHub

InfoTip is a small info icon that reveals a sentence of context on hover. It lets a control carry an explanation without spending a permanent line of the layout on something most readers only need once.

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.

Sizing

size takes the same tokens as Icon. Match it to the text it sits beside — xs next to a label, s next to body copy — so the icon reads as part of the line rather than an object dropped into it.

When not to use it

Hover-only content is invisible on touch and to anyone scanning rather than pointing, so an InfoTip must never carry information the reader needs in order to make the choice in front of them. That belongs in a visible description — Setting has a description prop for exactly this. Reserve InfoTip for the second sentence: the caveat, the unit, the reason a default is what it is.

Anything longer than a sentence or two wants a link to a page, not a tip.

In a Setting

Setting renders an InfoTip for you when you pass its info prop, which is the usual way you will meet this component.

API reference

Type
Default
children
The explanation. A sentence or two.
React.ReactNode—
size
Icon size, matched to the text it sits beside.
React.ComponentProps<typeof Icon>["size"]xs
…and every FlexProps propinherited—
Edit this page on GitHub