Make UI tooltips opaque and consistent

[dzarlax]

Summary

• Add an opaque, high-contrast shared tooltip surface for light and dark mode.
• Convert remaining DOM title tooltips in dashboard, nav, and admin readiness fragments to data-tooltip plus aria-label.
• Remove native title attributes from converted tooltips to avoid duplicate browser bubbles.

Test Plan

• git diff --check
• go test ./... -count=1

Summary by CodeRabbit

• New Features

  • Introduced a shared tooltip experience across the UI, including improved hover and keyboard-focus behavior.
  • Updated several navigation, dashboard, and admin tables to show richer, accessible tooltips instead of browser default popups.

• Bug Fixes

  • Improved tooltip positioning and visibility so content is less likely to clip or appear inconsistently in light and dark modes.
  • Added clearer accessibility labels and keyboard support for tooltip-triggering elements.

[coderabbitai]

Warning

Review limit reached

@dzarlax, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 54 minutes and 9 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c4e96c40-41f0-4313-a36c-0debefde2df0

📥 Commits

Reviewing files that changed from the base of the PR and between b245051 and 43779be.

📒 Files selected for processing (1)

• internal/ui/style.go

📝 Walkthrough

Walkthrough

Adds a tooltip system plan document and updates UI templates, shared CSS, and a regression test to use ui-tooltip, data-tooltip, aria-label, and focusable tooltip markup instead of native title attributes.

Changes

UI Tooltip System Rollout

Layer / File(s)	Summary
Shared tooltip styling internal/ui/style.go	Tooltip-specific theme tokens and .ui-tooltip::after styling now control tooltip colors, layering, visibility, and alignment.
Navigation and dashboard tooltips internal/ui/templates/nav.html, internal/ui/templates/pages/dashboard.html	Navigation links and dashboard badges now render tooltip text with ui-tooltip, data-tooltip, aria-label, and focusability attributes instead of title.
Readiness tooltip cells internal/ui/templates/partials/admin_readiness_contract.html, internal/ui/templates/partials/admin_readiness_monitoring.html, internal/ui/admin_readiness_redesign_contract_test.go	Readiness contract and monitoring cells now conditionally emit tooltip markup, and the related contract test checks the tooltip text source from data-tooltip.
Tooltip plan document docs/ai-plans/2026-06-26-ui-tooltip-system.html	The plan page records tooltip goals, assumptions, implementation steps, checks, risks, rollback notes, and status updates.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Dzarlax-AI/health_dashboard#118 — Adds the dashboard methodology badges whose tooltip markup is updated in this PR.
• Dzarlax-AI/health_dashboard#129 — Introduces the monitoring fragment whose reference-cell tooltip markup is updated here.
• Dzarlax-AI/health_dashboard#130 — Introduces the readiness partial whose coverage-cell tooltip markup is updated here.

Poem

I hopped by moonlight, soft and bright,
With tooltip berries tucked just right.
No more title crumbs in sight,
Just focus hops and hover delight.
🐇✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers summary and tests, but omits most required template sections like linked issue, privacy impact, evidence boundary, methodology, and deployment notes.	Add the missing template sections and fill in linked issue, privacy/data impact, evidence boundary, methodology/documentation, and deployment notes.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main UI tooltip surface and consistency changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/ui-tooltip-system

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@internal/ui/style.go`:
- Around line 215-230: The hover/focus rule in the tooltip styles is overriding
the centered positioning for ui-tooltip--center, causing the bubble to lose its
horizontal centering. Update the shared selector in style.go so
ui-tooltip:hover::after and ui-tooltip:focus-visible::after preserve the
center-specific transform for the ui-tooltip--center variant, likely by adding a
more specific center hover/focus rule or separating the transform behavior in
the ui-tooltip--center::after and ui-tooltip--center:hover::after /
:focus-visible::after selectors.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5d20d73c-dac4-49f3-9b27-296939c0d3f5

📥 Commits

Reviewing files that changed from the base of the PR and between 30831ea and b245051.

📒 Files selected for processing (7)

• docs/ai-plans/2026-06-26-ui-tooltip-system.html
• internal/ui/admin_readiness_redesign_contract_test.go
• internal/ui/style.go
• internal/ui/templates/nav.html
• internal/ui/templates/pages/dashboard.html
• internal/ui/templates/partials/admin_readiness_contract.html
• internal/ui/templates/partials/admin_readiness_monitoring.html