Skip to content

Fix duplicate native and custom tooltips#2671

Open
justsomelegs wants to merge 6 commits into
pingdotgg:mainfrom
justsomelegs:t3code/67f3c923
Open

Fix duplicate native and custom tooltips#2671
justsomelegs wants to merge 6 commits into
pingdotgg:mainfrom
justsomelegs:t3code/67f3c923

Conversation

@justsomelegs
Copy link
Copy Markdown
Contributor

@justsomelegs justsomelegs commented May 13, 2026

What Changed

This PR removes native browser tooltips from in-app UI surfaces that should use T3 Code's tooltip system instead.

It started with the confirmed double-tooltip bugs, then extends that cleanup across the remaining in-scope web UI controls where native title tooltips were still being used for hover help, status meaning, or truncated text reveals.

Updated areas include:

  • MessagesTimeline work/tool rows, revert action, and changed-file pills
  • thread and project status indicators in the sidebar
  • connection status dots in settings
  • composer mode/runtime/sidebar controls
  • diff panel controls and turn chips
  • project action buttons
  • truncated text/status banners in chat and settings

Why

Some surfaces could show both the browser's native tooltip and T3 Code's custom tooltip at the same time, which looks broken and feels inconsistent.

Other surfaces were still relying on native title tooltips even though similar UI already used the T3 Code tooltip system. This change standardizes those hover states so the app uses one tooltip model instead of mixing browser tooltips with custom ones.

For compact or icon-first UI, the hover meaning is preserved by moving it to T3 Code tooltips rather than removing it.

UI Changes

Before:

  • some hover targets showed both a native browser tooltip and a T3 Code tooltip at the same time
  • several compact controls and truncated labels still relied on native browser tooltips

After:

  • those hover targets show only the T3 Code tooltip
  • compact status indicators and icon-only controls still explain their meaning on hover
  • truncated timeline, diff, chat, and settings surfaces now use the same tooltip system as the rest of the app

Representative examples:

Screenshot 2026-05-13 130956 image

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

Note

Replace native title tooltips with custom Tooltip components across the web UI

  • Removes title attributes from interactive elements throughout the app (diff panel, sidebar, chat composer, message timeline, settings, etc.) and replaces them with Tooltip/TooltipTrigger/TooltipPopup components to prevent duplicate native and custom tooltips appearing simultaneously.
  • Adds aria-label to buttons and controls where title previously served as the accessible name.
  • Renames the CSS class markdown-file-link-tooltip-scroll to tooltip-scrollbar-thin in index.css and sets scrollbar width/height to 4px.
  • Updates browser tests in ChatView.browser.tsx to query buttons by aria-label instead of title.
  • Behavioral Change: scrollbars inside tooltip popups are now 4px wide instead of the previous size.

Macroscope summarized d7b4508.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 13, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 9c6cff47-a1d2-44c6-b915-41b2b4649c96

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:M 30-99 changed lines (additions + deletions). labels May 13, 2026
Comment thread apps/web/src/components/ThreadStatusIndicators.tsx
@macroscopeapp
Copy link
Copy Markdown
Contributor

macroscopeapp Bot commented May 13, 2026

Approvability

Verdict: Approved

Mechanical replacement of native title attributes with custom tooltip components to prevent duplicate tooltips. All changes follow an identical pattern with no behavior modifications beyond tooltip presentation.

You can customize Macroscope's approvability policy. Learn more.

macroscopeapp[bot]
macroscopeapp Bot previously approved these changes May 13, 2026
@macroscopeapp macroscopeapp Bot dismissed their stale review May 13, 2026 22:24

Dismissing prior approval to re-evaluate f32d96a

@github-actions github-actions Bot added size:L 100-499 changed lines (additions + deletions). and removed size:M 30-99 changed lines (additions + deletions). labels May 13, 2026
macroscopeapp[bot]
macroscopeapp Bot previously approved these changes May 13, 2026
@macroscopeapp macroscopeapp Bot dismissed their stale review May 13, 2026 22:33

Dismissing prior approval to re-evaluate d7b4508

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant