Tooltips

Tooltips provide contextual information when users hover over or focus on an element. They’re essential for progressive disclosure and improving user understanding without cluttering the interface.

Interactive Examples

Tooltip Positioning

Tooltips automatically position based on available viewport space

Core Principles

1. Intelligent Positioning

Tooltips automatically adjust their position to stay within the viewport, flipping sides when needed.

2. Accessibility First

Built with keyboard navigation, screen reader support, and proper ARIA attributes.

3. Progressive Disclosure

Essential information remains visible while supplementary details appear on interaction.

Usage Patterns

<!-- Basic tooltip -->
<Tooltip content="Save your work">
	<button>Save</button>
</Tooltip>

<!-- Positioned tooltip -->
<Tooltip content="Delete permanently" position="top">
	<button>Delete</button>
</Tooltip>

<!-- Multiline content -->
<Tooltip
	content="This action cannot be undone. All data will be permanently removed."
	multiline={true}
>
	<button>Delete All</button>
</Tooltip>

Component API

Prop	Type	Default	Description
`content`	`string`	required	The text to display in the tooltip
`position`	`'top' \\| 'right' \\| 'bottom' \\| 'left'`	`'bottom'`	Preferred position relative to the trigger
`multiline`	`boolean`	`false`	Allow content to wrap to multiple lines
`class`	`string`	`''`	Additional CSS classes

Guidelines

Essential Use Cases

Icon-only buttons - Always provide tooltips for buttons showing only icons
Truncated content - Show full text when space constraints force truncation
Disabled states - Explain why elements are disabled
Form assistance - Provide formatting hints or requirements
Complex actions - Clarify what will happen before interaction

Keep it concise - Under 80 characters when possible Use sentence case - Capitalize first letter, no ending punctuation Be descriptive - Clearly explain the action or context Avoid redundancy - Don’t repeat what’s already visible

✅ Good: "Export data as CSV file"
❌ Poor: "Click to export your data as a CSV file format"

✅ Good: "Available in Pro plan"
❌ Poor: "This feature is only available to Pro users"

Positioning System

Tooltips use intelligent positioning to ensure they’re always readable:

Smart collision detection - Automatically flips to opposite side when needed Viewport awareness - Never extends beyond the visible screen area Consistent spacing - Maintains proper distance from trigger elements

Accessibility Features

Keyboard navigation - Tooltips appear on focus, not just hover Screen reader support - Proper role="tooltip" and ARIA associations Touch device adaptation - Alternative patterns for mobile interaction High contrast compliance - Meets WCAG AA requirements

Keyboard Controls

Tab - Focus elements to show tooltips
Escape - Dismiss tooltip (when applicable)

Implementation Examples

Icon-Only Buttons

<Tooltip content="User settings">
	<button aria-label="User settings">
		<Icon name="settings" />
	</button>
</Tooltip>

Form Field Assistance

<label for="email">Email Address</label>
<Tooltip content="We'll never share your email" position="right">
	<input id="email" type="email" />
</Tooltip>

Disabled State Context

<Tooltip content="Complete all required fields first">
	<button disabled>Submit Form</button>
</Tooltip>

Design Constraints

Maximum content length - 120 characters to maintain scanability Position preference - Bottom placement unless viewport constraints require flipping Timing - 500ms delay on hover, immediate on focus Z-index - Above all interface elements for guaranteed visibility

Popovers - For interactive content and rich formatting Text Input - For form input with help text Status Messages - For system feedback and notifications