OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-008-critical-runtime-bugs/SUBTASK-A-tooltip-styling.md

SUBTASK-A: Fix Error Tooltip Styling

Parent Task: TASK-008
Status: 🔴 Not Started
Priority: HIGH
Estimated Effort: 1-2 hours

---

Problem

Error tooltips that appear when hovering over nodes with errors have white background and white text, making error messages unreadable.

---

Root Cause

Legacy CSS file (popuplayer.css) uses hardcoded white/light colors that don't work with the current theme system.

---

Files to Modify

1. packages/noodl-editor/src/editor/src/styles/popuplayer.css
   • Replace hardcoded colors with theme tokens
   • Follow UI-STYLING-GUIDE.md patterns

---

Implementation Plan

Step 1: Locate Hardcoded Colors

Search for color values in popuplayer.css:

• Background colors (likely #fff, #ffffff, or light grays)
• Text colors (likely #fff, #ffffff, or light grays)
• Border colors
• Arrow colors

Classes to check:

• .popup-layer-tooltip
• .popup-layer-tooltip-content
• .popup-layer-tooltip-arrow
• .popup-layer-tooltip-arrow.top
• .popup-layer-tooltip-arrow.bottom
• .popup-layer-tooltip-arrow.left
• .popup-layer-tooltip-arrow.right

---

Step 2: Apply Theme Tokens

Replace hardcoded colors with appropriate theme tokens:

Background:

• Use var(--theme-color-bg-3) or var(--theme-color-bg-panel-dark) for tooltip background
• Ensures proper contrast with text in all themes

Text:

• Use var(--theme-color-fg-default) for main text
• Ensures readable text in all themes

Border (if present):

• Use var(--theme-color-border-default) or var(--theme-color-border-subtle)

Arrow:

• Match the background color of the tooltip body
• Use same theme token as background

---

Step 3: Test in Both Themes

1. Create a node with an error (e.g., invalid connection)
2. Hover over the node to trigger error tooltip
3. Verify tooltip is readable in light theme
4. Switch to dark theme
5. Verify tooltip is readable in dark theme
6. Check all tooltip positions (top, bottom, left, right)

---

Step 4: Verify All Tooltip Types

Test other tooltip uses to ensure we didn't break anything:

• Info tooltips (hover help text)
• Warning tooltips
• Connection tooltips
• Any other PopupLayer.showTooltip() uses

---

Example Implementation

Before (hardcoded):

.popup-layer-tooltip {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
}

After (theme tokens):

.popup-layer-tooltip {
  background-color: var(--theme-color-bg-3);
  color: var(--theme-color-fg-default);
  border: 1px solid var(--theme-color-border-default);
}

---

Success Criteria

• Error tooltips readable in light theme
• Error tooltips readable in dark theme
• Text has sufficient contrast with background
• Arrow matches tooltip background
• All tooltip positions work correctly
• Other tooltip types still work correctly
• No hardcoded colors remain in tooltip CSS

---

Testing Checklist

• Create node with error (invalid expression, disconnected required input, etc.)
• Hover over node to show error tooltip
• Verify readability in light theme
• Switch to dark theme
• Verify readability in dark theme
• Test tooltip appearing above node (position: top)
• Test tooltip appearing below node (position: bottom)
• Test tooltip appearing left of node (position: left)
• Test tooltip appearing right of node (position: right)
• Test info tooltips (hover on port, etc.)
• No visual regressions in other popups/tooltips

---

Related Documentation

• dev-docs/reference/UI-STYLING-GUIDE.md - Theme token reference
• dev-docs/reference/COMMON-ISSUES.md - UI styling patterns

---

Notes

• This is a straightforward CSS fix
• Should be quick to implement and test
• May uncover other hardcoded colors in popuplayer.css
• Consider fixing all hardcoded colors in that file while we're at it