name	contextual-help-design
description	Use when designing in-app contextual help: tooltips, help icons, links to docs, embedded video. Covers when to use each, the placement, and how to add help without cluttering.

Contextual Help Design

Help should be available without being intrusive.

Tooltip patterns

Hover over '?' icon shows short explanation. Max 1 sentence. Link to docs for more.

Inline help text

Below the field, gray, 12px. For form labels that need clarification.

Help center link

Persistent in app header / nav. Opens help in side drawer (better than new tab — doesn't lose context).

Embedded video

30-90 second product videos embedded inline. For complex features only.

Common mistakes

Help text 5 paragraphs long. No help where it's needed. Help link buried in settings. Tooltips on EVERY field (noise).

Where this fits in X3 Compass

Applied across the X3 Compass design system.

name	contextual-help-design
description	Use when designing in-app contextual help: tooltips, help icons, links to docs, embedded video. Covers when to use each, the placement, and how to add help without cluttering.