Contextual Help

Assistance relevant to the current screen or task.

html

<div class="contextual-help contextual-help--tooltip" style="--accent:#BFD9F2">
  <button type="button" class="contextual-help__trigger" aria-expanded="false" aria-describedby="ch-help-text">
    <span>What&#39;s a workspace?</span>
    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.3"/><path d="M8 7v4.5M8 4.6v.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
  </button>
  <div id="ch-help-text" class="contextual-help__panel" hidden>A workspace groups projects, people and billing under one shared account.</div>
</div>
<style>
.contextual-help { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 320px; }
.contextual-help__trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 4px 0; font: 600 14px system-ui, sans-serif; color: var(--accent); cursor: pointer; }
.contextual-help__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.contextual-help__panel { margin-top: 8px; font-size: 13.5px; color: #241430cc; }
.contextual-help--tooltip .contextual-help__panel { background: #241430; color: #FAF7F2; padding: 10px 12px; border-radius: 8px; position: relative; }
.contextual-help--inline .contextual-help__panel { padding-left: 21px; border-left: 2px solid var(--accent); }
.contextual-help--callout .contextual-help__panel { background: var(--accent); color: #241430; padding: 12px 14px; border-radius: 10px; }
</style>

tailwind

<div class="contextual-help-tw contextual-help-tw--tooltip font-sans text-[#241430] max-w-xs" style="--accent:#BFD9F2">
  <button type="button" class="inline-flex items-center gap-1.5 bg-transparent border-0 py-1 font-semibold text-sm cursor-pointer" style="color:#BFD9F2" aria-expanded="false" aria-describedby="ch-help-text-tw">
    <span>What&#39;s a workspace?</span>
    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.3"/><path d="M8 7v4.5M8 4.6v.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
  </button>
  <div id="ch-help-text-tw" class="mt-2 text-[13.5px] text-[#241430]/80" hidden>A workspace groups projects, people and billing under one shared account.</div>
</div>
<style>
.contextual-help-tw--tooltip #ch-help-text-tw { background: #241430; color: #FAF7F2; padding: 10px 12px; border-radius: 8px; }
.contextual-help-tw--inline #ch-help-text-tw { padding-left: 21px; border-left: 2px solid #241430; }
.contextual-help-tw--callout #ch-help-text-tw { background: #24143022; padding: 12px 14px; border-radius: 10px; }
</style>

react

import { useState } from "react";

export function ContextualHelp({
  label = "What's a workspace?",
  helpText = "A workspace groups projects, people and billing under one shared account.",
  expanded: initialExpanded = false,
  variant = "tooltip",
  accent = "#BFD9F2",
}) {
  const [expanded, setExpanded] = useState(initialExpanded);
  const panelStyle = {
    tooltip: { background: "#241430", color: "#FAF7F2", padding: "10px 12px", borderRadius: 8 },
    inline: { paddingLeft: 21, borderLeft: "2px solid " + accent },
    callout: { background: accent, color: "#241430", padding: "12px 14px", borderRadius: 10 },
  }[variant] ?? {};
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, color: "#241430", maxWidth: 320 }}>
      <button type="button" aria-expanded={expanded} aria-describedby="ch-help-text-react" onClick={() => setExpanded((e) => !e)}
        style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "transparent", border: "none", padding: "4px 0", font: "600 14px system-ui, sans-serif", color: accent, cursor: "pointer" }}>
        <span>{label}</span>
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.3" /><path d="M8 7v4.5M8 4.6v.1" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg>
      </button>
      {expanded && (
        <div id="ch-help-text-react" style={{ marginTop: 8, fontSize: 13.5, ...panelStyle }}>{helpText}</div>
      )}
    </div>
  );
}