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.
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.
<Row gap="8" vertical="center">
<Text variant="label-default-s">Bitrate</Text>
<InfoTip>
Higher bitrates keep more detail in fast motion, at a larger file size.
</InfoTip>
</Row>
<Setting
label="Bitrate"
info="Higher bitrates keep more detail in fast motion, at a larger file size."
>
<Select id="bitrate" options={options} />
</Setting>
