[component]

Dev Mode
Tooltip
Description
Tooltip is a floating text label that succinctly describes the function of an interactive element, typically Icon Button. It’s displayed continuously as long as the user hovers over or focuses on the element. Also known as ‘Info tip’.
Ideal Position
Include Arrow
Usage Guidelines
Do
Use a tooltip to provide helpful but non-essential context.
Enhance baseline understanding of an element or feature.
Don't
Do not use a tooltip to display critical information.
Accessibility
The tooltip should not be repetitive with the label of the element it relates to.
When using Tooltip with IconButton, avoid repetitive labeling. The accessibilityLabel provided to IconButton should describe the intent of the button, not the icon itself. For instance, use “Settings” instead of “Cog icon”. Tooltip text should expand upon that intention.
If Tooltip text is the same as IconButton accessibilityLabel, then add accessibilityLabel="" to the Tooltip.
Props
Name
Type
Required
Description
children
ReactElement
Required
The content of the tooltip.
idealPosition
The ideal position of the tooltip.
includeArrow
boolean
If true, an arrow will be included in the tooltip.
text
string
The text content of the tooltip. If text is undefined, the children will be rendered without a tooltip.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Examples
Positions
Different Positions - Web Demo
Different Positions With Overflow
IncludeArrows
Includes an Arrow - to be used when tooltip areas are crowded together - Web Demo
AroundText
This text has a tooltip. Works on Mobile