In-app help patterns

Embed contextual guidance inside your product so users never need to leave the flow to find answers.

Tooltip triggers

Attach short explainers to icons, badges, or underlined terms. Keep tooltips under 140 characters and trigger on hover with a 300ms delay to avoid flicker.

<span class="underline decoration-dotted cursor-help" title="Your license key is in the welcome email">License key</span>

Slide-out panel

For multi-step guidance, use a 320px panel that slides in from the right. Include a search input pinned at the top and collapsible sections below.

<aside class="fixed right-0 top-0 h-full w-80 border-l border-gray-800 bg-[#0A0612] p-6">
  <input placeholder="Search help..." class="w-full rounded border border-gray-700 bg-transparent px-3 py-2 text-sm" />
  <details class="mt-4"><summary class="cursor-pointer text-sm font-medium">Getting started</summary><p class="mt-1 text-xs text-gray-500">...</p></details>
</aside>

Empty-state CTAs

When a view has no data, replace the void with a single-sentence explanation and a link to the relevant docs page.

<div class="text-center py-16">
  <p class="text-gray-500">No API keys yet.</p>
  <a href="/docs/api-keys" class="text-[#8B5CF6] underline text-sm mt-2 inline-block">Learn how to create one &rarr;</a>
</div>

Inline validation hints

Show a one-line hint below a form field the moment it loses focus. Use a muted tone for info and pink for errors.

<input aria-describedby="hint-license" />
<p id="hint-license" class="text-xs text-gray-500 mt-1">Paste the key from your dashboard.</p>

Pro tip: Keep help content in a static JSON file per locale. Load it client-side so the panel renders instantly without a network round trip.