diff --git a/docs/plans/2026-03-09-tooltip-hover-design.md b/docs/plans/2026-03-09-tooltip-hover-design.md new file mode 100644 index 0000000..f5e8429 --- /dev/null +++ b/docs/plans/2026-03-09-tooltip-hover-design.md @@ -0,0 +1,56 @@ +# Hover Tooltips for Abbreviations + +## Problem +The game UI has many single-letter tab abbreviations and 3-letter stat abbreviations that aren't self-explanatory to new players. + +## Solution +Add custom pixel-art styled tooltips on hover that spell out the full name. + +## Tooltip Component +A reusable custom tooltip div matching the EarthBound pixel-art style: +- Font: 'Press Start 2P', ~10-12px +- Colors: `#e0d0b0` text on `#1a1a2e` background +- Border: 2-3px solid matching `EB.borderOuter` +- Small padding, no wrapping, white-space: nowrap +- Appears on `mouseenter`, removed on `mouseleave` +- Positioned absolutely relative to the hovered element +- No delay (instant feedback) + +## Tooltip Placements + +| Element | Position | Rationale | +|---------|----------|-----------| +| Left panel tabs (S/E/I/R) | Right of tab | Away from screen edge | +| Right panel tabs (S/R/H/I) | Left of tab | Doesn't obscure panel content | +| Stat labels (STR/DEX/etc.) | Above the stat | Doesn't obscure stats below | + +## Tooltip Mappings + +### Left Panel Tabs +- S → Superlatives +- E → Event Log +- I → Inventions +- R → Resources + +### Right Panel Tabs (NPC Info) +- S → Status +- R → Relationships +- H → History +- I → Inventory + +### Stats +- STR → Strength +- DEX → Dexterity +- CON → Constitution +- INT → Intelligence +- PER → Perception +- SOC → Sociability +- COU → Courage +- CUR → Curiosity +- EMP → Empathy +- TMP → Temperament + +## Implementation Approach +- Create a shared tooltip utility that both panels can use +- Each panel attaches mouseenter/mouseleave listeners to relevant elements +- Tooltip div is created on hover, positioned absolutely, removed on leave