Tooltip

Use cases

Make sure the Tooltip is suitable for your use case. In some cases, a static text label is preferred. In others, the Tooltip can supplement a static text label. For IconButton, Tooltip is the only labeling mechanism available, and it is invoked using the label prop.

Use case	Tooltip	Popover	Static text
IconButton primary label	✅ (required via the label prop)	❌	❌
Button or Link	✅ (optional)	✅ (optional)	✅ (required)
TextField primary label	❌	❌	✅ (required)
TextField validation hints	✅	❌	✅
TextField and other input descriptions	❌	❌	✅
Text longer than a short phrase or sentence	❌	✅	✅
Mobile-first interfaces, where :hover is not available	❌	❌	✅
Rich, structured and interactive content	❌	✅	❌

StrataKit MUI modifications

• Restyled using StrataKit’s visual language.
• The describeChild prop defaults to true.
• Change default placement from "bottom" to "top".
• Includes full forced-colors support.

Examples

Direction

The Tooltip supports 12 placement options. The example highlights 4 of the most common.

Label

Use the describeChild prop to provide an accessible label via aria-label, instead of the default behavior, which supplies a description via aria-describedby.

IconButton

The Tooltip is integrated into the IconButton component and available via the label prop. The Tooltip component is not needed.

Since the IconButton’s tooltip represents its principle label, choose a label value that adequately explains the IconButton’s purpose.

✅ Do

• Use IconButton label prop to automatically apply Tooltip.
• Use Tooltips as descriptions for Button elements, supplementing the Button’s existing label.
• Keep tooltip content brief, relevant, and helpful.

🚫 Don’t

• Don’t use Tooltips around static elements (e.g. <div> or <span>).
• Don’t place interactive elements inside the Tooltip content. Use Popover instead.
• Don’t use Tooltips for the labels or descriptions of form inputs. Use inline text elements instead.
• Don’t use Tooltips for revealing truncated text.
• Don’t omit a programmatically associated label or description unless an accessible label/name is in place by other means.