Add a Help mode toggle to the Pattern Editor (pattern_editor.html). When ON, hovering over any button/control shows a floating help bubble describing what it does; when OFF, the UI is uncluttered (current behavior).
Why
The tool has grown a lot of controls across Generate/Animate/Combine/Image plus the viewer toolbar. We already rely on native title= tooltips (~62 controls today), but native tooltips are slow to appear, inconsistently styled, truncate long text, and ~20 buttons currently have none. A deliberate, discoverable Help mode makes the whole UI self-documenting for new users.
Requested behavior
- A Help toggle in the header (near the existing
quickStartBtn) — e.g. a "?" button that highlights when active. Persist the on/off state (localStorage).
- When ON: hovering any interactive element (buttons, tabs, inputs, sliders, selects, the vertical GENERATE button, viewer toolbar buttons, filmstrip actions) shows a custom floating tooltip — styled to the dark theme (
--surface/--border/--text, JetBrains/IBM Plex Mono), positioned near the cursor/element, no native-title delay.
- When OFF: no custom bubbles (native
title behavior only, as today).
- Optional: a subtle affordance while Help is on (e.g. a dotted underline / "?" cursor on helpable elements).
Implementation notes
- Single source of truth for copy: drive the bubble text from the existing
title attributes (or a data-help attribute) so we don't maintain descriptions twice. First pass can simply reuse title.
- Close the coverage gap: ~20 buttons have no
title yet (per CLAUDE.md's tooltip rule that every interactive element needs one) — add help text for those as part of this.
- Use event delegation (hover on
[title]/[data-help]) so dynamically-rendered controls (filmstrip, command cards, clipboard) are covered automatically.
- Respect the existing tooltip-audit checklist in
CLAUDE.md.
Acceptance
- Toggling Help on/off works and persists across reloads.
- With Help on, hovering every control in all four tabs + the viewer toolbar shows a themed floating description; no control is left without help text.
- With Help off, the UI matches current behavior.
Related: Pattern Editor tracking #6.
Add a Help mode toggle to the Pattern Editor (
pattern_editor.html). When ON, hovering over any button/control shows a floating help bubble describing what it does; when OFF, the UI is uncluttered (current behavior).Why
The tool has grown a lot of controls across Generate/Animate/Combine/Image plus the viewer toolbar. We already rely on native
title=tooltips (~62 controls today), but native tooltips are slow to appear, inconsistently styled, truncate long text, and ~20 buttons currently have none. A deliberate, discoverable Help mode makes the whole UI self-documenting for new users.Requested behavior
quickStartBtn) — e.g. a "?" button that highlights when active. Persist the on/off state (localStorage).--surface/--border/--text, JetBrains/IBM Plex Mono), positioned near the cursor/element, no native-title delay.titlebehavior only, as today).Implementation notes
titleattributes (or adata-helpattribute) so we don't maintain descriptions twice. First pass can simply reusetitle.titleyet (per CLAUDE.md's tooltip rule that every interactive element needs one) — add help text for those as part of this.[title]/[data-help]) so dynamically-rendered controls (filmstrip, command cards, clipboard) are covered automatically.CLAUDE.md.Acceptance
Related: Pattern Editor tracking #6.