---
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:
      <div flex-col>
        {tooltipText && <button>icon</button>}     ← lines 85-94: icon ABOVE field
        {tooltipText && showTooltip && <p>text</p>} ← lines 95-99: tooltip text ABOVE field
        <TextFieldMD3 helpText={field.helpText} />  ← lines 100-107: field with helpText inside
      </div>
    The icon button is a sibling rendered BEFORE TextFieldMD3, placing it above the field.
    Meanwhile, helpText is rendered INSIDE TextFieldMD3 (TextFieldMD3.tsx lines 65-67),
    so the icon cannot be "beside the helpText" from its current position.
  implication: Root cause of Issue 2 — icon is structurally above the field, not beside helpText

- timestamp: 2026-04-01T00:00:00Z
  checked: TextFieldMD3.tsx lines 65-67
  found: |
    helpText is rendered inside TextFieldMD3:
      {helpText && !error && (
        <p className="text-xs text-on-surface-container/70">{helpText}</p>
      )}
    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 <TextFieldMD3>, placing it visually
    above the text field. The helpText is rendered INSIDE TextFieldMD3 (TextFieldMD3.tsx
    line 65-67), making it impossible for the icon in FieldRenderer to sit beside it.
    To place the icon beside helpText, either:
    (a) TextFieldMD3 needs a new prop (e.g., helpTextSuffix or helpTextIcon) to render
        content inline with the helpText paragraph, or
    (b) helpText rendering moves out of TextFieldMD3 back into FieldRenderer, where the
        icon and helpText can be placed in a flex-row together.

fix: (not applied — diagnosis only)
verification: (not applied — diagnosis only)
files_changed: []