Tooltip variant for non-interactive triggers like icons, badges, and text labels.
Use InfoTooltip when the trigger is a non-interactive element – an icon, badge, or text label – and the tooltip is purely informational. It wraps the trigger in a focusable element with the accessibility attributes tooltips require (tabIndex, aria-label, and keyboard handlers).
Use the base Tooltip when the trigger is already interactive – a button, link, or form control – and handles its own focus and keyboard behavior.
InfoTooltip accepts positioning and width props from the underlying Tooltip.
When children is omitted, the trigger renders as a gray InfoCircledIcon. Pass any element as children to use a custom trigger (badge, text label, custom icon). Override label to tailor the screen-reader announcement when “More information” is too generic.
InfoTooltip provides the following out of the box:
tabIndex={0} on the trigger wrapper.label prop (set as aria-label, defaulting to "More information").aria-describedby, wired automatically by Radix when open.Enter or Space toggles the tooltip; Escape dismisses it.Provide a custom label when the default "More information" is too generic to identify the trigger in a list of landmarks. Write it as a short noun phrase, e.g. "Feature information" or "Billing details".