## Summary
- Replace native HTML `title` attributes on button elements across 25
files with proper `<Tooltip>` / `<TooltipTrigger>` / `<TooltipContent>`
components from the existing UI library
- Native browser tooltips are delayed and unstyled; the shadcn tooltips
provide a consistent, polished tooltip experience with animations and
proper positioning
- Only button/interactive elements were converted; `title` on
non-interactive elements like `<span>` (text overflow), `<iframe>`, and
component props were intentionally left as-is

## Test plan
- [x] TypeScript type check passes (`npm run ts`)
- [x] Lint passes (`npm run lint`)
- [x] Formatting passes (`npm run fmt`)
- [x] All 661 unit tests pass (`npm test`)
- [ ] Manual: hover over icon buttons throughout the app (chat input,
preview toolbar, annotator, settings) to verify styled tooltips appear
instead of browser-native ones

🤖 Generated with [Claude Code](https://claude.com/claude-code)
<!-- devin-review-badge-begin -->

---

<a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2470">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily UI/UX refactoring of hover tooltips with minimal behavioral
impact; main risk is small layout/accessibility regressions from the
updated tooltip styling/positioning.
> 
> **Overview**
> Replaces native `title` tooltips on many interactive controls (chat,
preview/annotator toolbars, settings/connectors, branch manager, etc.)
with the app’s `Tooltip` components, using `TooltipTrigger`’s `render`
prop to avoid invalid nested `<button>` markup.
> 
> Updates the tooltip implementation (`src/components/ui/tooltip.tsx`)
to remove the implicit provider wrapper, tweak default positioning
(`sideOffset`), and restyle tooltip/arrow classes; adjusts E2E aria
snapshots accordingly and documents the `TooltipTrigger render` pitfall
in `AGENTS.md`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8055379edcec73b53ca54ee82b9f4fb4a2f92c63. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Replaced native title tooltips on interactive buttons with shadcn
Tooltip for consistent, styled, and responsive tooltips across the app.
Improves usability and visual polish without changing button behavior.

- **Refactors**
- Converted titles to Tooltip/TooltipTrigger/TooltipContent across ~25
files, using TooltipTrigger’s render prop to avoid nested button HTML.
- Kept native title for drag handles and resize rails, and left titles
on non-interactive elements (e.g., span, iframe, component props).
- Updated tooltip defaults (sideOffset 4) and removed the implicit
provider; added aria-labels to icon-only buttons; fixed ToggleGroupItem
corner styles and preserved ref forwarding where needed.

<sup>Written for commit 8055379edcec73b53ca54ee82b9f4fb4a2f92c63.
Summary will update on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

---------
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>