Info Tip
An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help. Its value over hand-composing Icon inside Tooltip is the pre-wired accessible trigger: a real button with an aria-label, Tab-reachable, tooltip on hover AND focus AND tap, and Escape dismissal.
Usage
An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help. Its value over hand-composing Icon inside Tooltip is the pre-wired accessible trigger: a real button with an aria-label, Tab-reachable, tooltip on hover AND focus AND tap, and Escape dismissal.
- Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.
- Override label when "More information" is too generic, e.g. "About this metric".
- Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip touchTrigger to tap, so a tap opens the tooltip even though the trigger is a button, and a tap outside dismisses it.
- Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable, so keyboard and screen-reader users never see it.
- Use InfoTip for essential information users must see to complete a task; put that text inline instead.
Typed props
| Prop | Type and behavior |
|---|---|
content | ReactNode · requiredContent to display in the tooltip. Typically short, non-interactive text. Mirrors Tooltip's content prop. |
label | string · default 'More information'Accessible name for the trigger button. |
size | 'xsm' | 'sm' | 'md' | 'lg' · default 'sm'Size of the info icon (12px, 16px, 20px, 24px). Maps 1:1 to Icon sizes. |