CommunicationMaterial Design 3

Tooltips

Tooltips display informative text when users hover over, focus on, or tap an element. They provide additional context and guidance for interface elements.

Overview

Material Design tooltips are brief, informative messages that appear when a user interacts with an element. They are typically used to label icon buttons, provide additional information about controls, or clarify the function of UI elements. Tooltips should be succinct and should not contain essential information.

Live Preview

Add to favorites

Delete

Settings

Tooltip Positions

Top tooltip

Top

Bottom

Bottom tooltip

Left

Right

Rich Tooltips

Plain

Brief label text

Rich

Rich tooltip title

Supporting line text with more information about the element.

Brand Properties

The following table shows all CRAFT Tooltip properties with their default values and brand-specific mappings.

Property	Type	Material Default	HoB Value	TAE Value
Background Color (Plain)	Color picker	`#313033`	`#1f2937`	`#1f2937`
Text Color (Plain)	Color picker	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`
Background Color (Rich)	Color picker	`#F5F5F5`	`#FFFFFF`	`#FFFFFF`
Font Size	Dropdown	`12px`	`12px`	`12px`
Font Weight	Dropdown	`500`	`400`	`400`
Border Radius	Input (px)	`4px`	`4px`	`4px`
Padding Vertical	Input (px)	`4px`	`6px`	`6px`
Padding Horizontal	Input (px)	`8px`	`12px`	`12px`
Max Width	Input (px)	`200px`	`200px`	`200px`
Arrow Size	Input (px)	`8px`	`8px`	`8px`
Show Delay	Input (ms)	`500ms`	`300ms`	`300ms`
Hide Delay	Input (ms)	`0ms`	`0ms`	`0ms`
Transition Duration	Input (ms)	`150ms`	`200ms`	`200ms`
Offset from Element	Input (px)	`8px`	`8px`	`8px`

Interactive Example

Hover over the buttons to see tooltips

Save without publishing

Preview your changes

Help

Accessibility

Use aria-describedby to associate tooltip with the element
Tooltips should be accessible via keyboard (focus) not just hover
Keep tooltip text concise and readable
Do not include interactive elements in plain tooltips
Ensure sufficient color contrast for tooltip text
Rich tooltips with actions must be keyboard navigable

Best Practices

Do

Keep tooltip text brief and helpful
Use tooltips to label icon-only buttons
Position tooltips to avoid covering related content
Use consistent delay timing across the interface

Don't

Put essential information only in tooltips
Add tooltips to elements with visible text labels
Use tooltips for error messages or warnings
Make tooltips too long or complex

Related Components

Communication Overview
Snackbar - For feedback messages
Actions - Icon buttons that need tooltips