fix: standardize tooltip delays to 300ms (#5090)

[hannesrudolph]

Description

Fixes #5090

https://github.com/user-attachments/assets/d67c82b6-0674-4955-87d6-883069ce3844

This PR standardizes all tooltip delays across the Roo Code webview to use a consistent 300ms delay, replacing the inconsistent delays that ranged from instant (0ms) to over 2 seconds.

Changes Made

• Created StandardTooltip component that wraps Radix UI's Tooltip with a fixed 300ms delay
• Replaced all native HTML title attributes with StandardTooltip across 40+ component files
• Updated all affected test files to work with the new tooltip implementation
• Exported StandardTooltip from the UI components index for easy importing

Testing

• All existing tests pass (487 tests passing)
• Manual testing completed:
  • Verified tooltips in chat components show after 300ms
  • Verified tooltips in settings components show after 300ms
  • Verified tooltips in marketplace components show after 300ms
  • Verified tooltips in history components show after 300ms
  • Verified tooltips in common components show after 300ms

Verification of Acceptance Criteria

• All tooltips within the webview now use consistent 300ms delay
• No more instant tooltips or 2+ second delays
• Tooltip behavior is consistent across the entire application

Known Limitation

The VSCode activity bar icon tooltip ("Roo Code" when hovering over the extension icon) cannot be customized as it's controlled by VSCode's native UI through the extension manifest. This is a platform limitation that affects all VSCode extensions.

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex logic (StandardTooltip component documented)
• Documentation updated (component has JSDoc)
• No breaking changes
• Accessibility checked (tooltips work with keyboard navigation)

Screenshots/Demo

All tooltips now consistently appear after 300ms hover delay instead of the previous inconsistent behavior.

---

Important

Standardizes tooltip delays to 300ms across the application by introducing a StandardTooltip component, replacing native title attributes, and updating tests accordingly.

• Behavior:
  • Introduces StandardTooltip component with a fixed 300ms delay, replacing native HTML title attributes in over 40 component files.
  • Ensures consistent tooltip behavior across the application.
• Testing:
  • Updates all affected test files to accommodate the new tooltip implementation.
  • Adds tests for StandardTooltip in tooltip.spec.tsx.
• Misc:
  • Exports StandardTooltip from the UI components index for easy importing.

^{This description was created by for 7f3a55a. You can customize this summary. It will automatically update as commits are pushed.}

[delve-auditor]

We have finished reviewing your PR. We have found no vulnerabilities.

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

[Copilot]

Pull Request Overview

Standardizes tooltip behavior by creating a single StandardTooltip wrapper with a fixed 300ms delay and replacing all inline title attributes across the codebase. Tests and mocks are updated to accommodate the new component.

• Introduces StandardTooltip component enforcing a 300ms delay.
• Replaces native title attributes with StandardTooltip in UI, common, settings, marketplace, history, chat modules.
• Updates test suites to mock or wrap the new tooltip implementation.

Reviewed Changes

Copilot reviewed 44 out of 44 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
webview-ui/src/components/ui/standard-tooltip.tsx	Defines StandardTooltip wrapper enforcing 300ms tooltip delay
webview-ui/src/components/ui/index.ts	Exports StandardTooltip for reuse
webview-ui/src/components/ui/select-dropdown.tsx	Replaces native title on dropdown triggers with StandardTooltip
webview-ui/src/components/common/IconButton.tsx	Removes inline title from icon buttons and wraps them in StandardTooltip
webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx	Switches from Radix Tooltip to StandardTooltip for install/remove controls

Comments suppressed due to low confidence (1)

webview-ui/src/components/marketplace/components/tests/MarketplaceItemCard.spec.tsx:60

• This test suite doesn’t mock StandardTooltip, so real tooltip logic may run and make tests brittle. Consider adding a StandardTooltip mock (e.g., returning its children) to stabilize these tests.

	return render(<TooltipProvider delayDuration={300}>{ui}</TooltipProvider>)

[hannesrudolph]

Created PR #5101 to address the tooltip overflow issue. The fix enables text wrapping by removing the overflow-hidden class and adding proper wrapping styles with a default max-width of 300px.

[hannesrudolph]

Added tooltip overflow fix to this PR. The changes include:

• Removed overflow-hidden class from TooltipContent that was preventing text wrapping
• Added max-w-[300px] and break-words classes for proper text wrapping
• Added optional maxWidth prop to StandardTooltip for customization
• Added comprehensive tests for tooltip behavior

Tooltips now wrap text within a 300px maximum width by default instead of extending beyond the plugin viewport.

[hannesrudolph]

I've addressed all three issues from the review:

1. Performance concern: Removed the individual TooltipProvider from the StandardTooltip component. The provider is now only at the app root level.

2. Nested tooltips: Fixed the nested tooltips in ContextWindowProgress by consolidating them into a single tooltip that displays both the percentage and token count information.

3. Accessibility: Verified that IconButton already has the aria-label attribute properly set.

All tests are passing and CI/CD checks are green. The changes are ready for re-review.

[daniel-lxs]

Looks good!