Add tap/click tooltips for cliché highlights on touch devices

[simonw]

llm-cliche-highlighter says "hover a highlight to see which cliché it hit" but that doesn't work on mobile

Claude Code with Fable 5

Summary

This PR adds interactive tooltips for cliché highlights that appear on tap/click, improving the experience on touch devices where hover tooltips are unavailable. The existing title attribute hover tooltips are preserved for mouse users.

Key Changes

• New tooltip UI: Added .hit-tip CSS class for a floating tooltip element with dark background, positioned intelligently to avoid viewport edges
• Touch-friendly interaction: Implemented click/tap handlers that show/hide tooltips on highlights and badges, with toggle behavior (tap again to dismiss)
• Tooltip content: Created matchTipText() helper that combines pattern name with chain item count (badge title) when applicable
• Smart dismissal: Tooltips automatically hide when:
  • Clicking elsewhere on the page
  • Scrolling the viewport
  • Running a new analysis
• Accessibility: Tooltip element has role="tooltip" and pointer-events: none to avoid interfering with interactions
• Visual polish: Added cursor: pointer and -webkit-tap-highlight-color: transparent to highlight marks for better touch feedback
• Updated documentation: Changed subtitle text from "hover" to "tap or hover" to reflect new interaction method
• Test coverage: Added unit test for matchTipText() function

Implementation Details

• Tooltip positioning uses getBoundingClientRect() to calculate placement relative to the highlight, with fallback to bottom placement if insufficient space above
• Maintains currentMatches array to map highlight IDs back to match data for tooltip content
• Uses event delegation on output element to handle clicks on both marks and badges
• Tooltip state tracked via tipTarget to enable toggle behavior

https://claude.ai/code/session_018sZga7AZEvoiYGfMYiBqTY

[claude]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.