diff --git a/.planning/debug/tooltip-info-buttons-broken.md b/.planning/debug/tooltip-info-buttons-broken.md new file mode 100644 index 0000000..529c045 --- /dev/null +++ b/.planning/debug/tooltip-info-buttons-broken.md @@ -0,0 +1,87 @@ +--- +status: diagnosed +trigger: "Tooltip info buttons on Remote Config wizard step: hovering doesn't show anything, icon placement is wrong (above field instead of beside helpText)" +created: 2026-04-01T00:00:00Z +updated: 2026-04-01T00:00:00Z +--- + +## Current Focus + +hypothesis: Two distinct root causes — onClick-only toggle (no hover), and icon placed above TextFieldMD3 instead of beside helpText +test: Code review of FieldRenderer.tsx lines 83-109 and TextFieldMD3.tsx lines 65-67 +expecting: Confirm both issues from source +next_action: Report diagnosis + +## Symptoms + +expected: (1) Hovering tooltip button shows tooltip text. (2) Icon is beside the helpText under the field. +actual: (1) Nothing happens on hover — only click toggles. (2) Icon is above the TextFieldMD3 component. +errors: none +reproduction: Open Remote Config wizard, hover over any info button +started: Since phase-09 tooltip implementation + +## Eliminated + +(none needed — root causes identified on first pass) + +## Evidence + +- timestamp: 2026-04-01T00:00:00Z + checked: FieldRenderer.tsx lines 83-109 (text input default branch) + found: | + The tooltip button at lines 85-94 uses onClick={() => setShowTooltip(v => !v)} only. + There are NO onMouseEnter/onMouseLeave handlers, and no CSS hover-triggered tooltip. + The tooltip text (lines 95-99) is only rendered when showTooltip state is true, + which only changes on click — never on hover. + implication: Root cause of Issue 1 — tooltip requires click, not hover + +- timestamp: 2026-04-01T00:00:00Z + checked: FieldRenderer.tsx lines 83-109 (DOM structure of text input branch) + found: | + The DOM order is: +
text
} ← lines 95-99: tooltip text ABOVE field +{helpText}
+ )} + This is encapsulated inside the component — FieldRenderer has no way to inject + an icon beside it without either: (a) passing the icon as a prop, or (b) moving + helpText rendering out of TextFieldMD3. + implication: Fix requires changing TextFieldMD3 interface or moving helpText rendering + +## Resolution + +root_cause: | + ISSUE 1 — Tooltip doesn't show on hover: + File: src/components/ui/FieldRenderer.tsx, lines 85-94 + The tooltip button only has an onClick handler that toggles showTooltip state. + There are no onMouseEnter/onMouseLeave handlers and no CSS :hover mechanism. + The tooltip content (lines 95-99) is conditionally rendered only when showTooltip === true, + which never becomes true from hovering. + + ISSUE 2 — Icon placed above field instead of beside helpText: + File: src/components/ui/FieldRenderer.tsx, lines 83-109 + The icon button is rendered as a sibling BEFORE