Replace button title attributes with shadcn Tooltip components (#2470)

AGENTS.md

@@ -214,3 +214,20 @@ Add `#skip-bugbot` to the PR description for trivial PRs that won't affect end-u
 - Linting or test setup changes
 - Documentation-only changes
 - CI/build configuration updates
+
+## Learnings
+
+### TooltipTrigger render prop (Base UI)
+
+- `TooltipTrigger` from `@base-ui/react/tooltip` (wrapped in `src/components/ui/tooltip.tsx`) renders a `<button>` by default. Wrapping another button-like element (`<button>`, `<Button>`, `<DropdownMenuTrigger>`, `<PopoverTrigger>`, `<MiniSelectTrigger>`, `<ToggleGroupItem>`) inside it creates invalid nested `<button>` HTML. Use the `render` prop instead:
+
+  ```tsx
+  // Wrong: nested buttons
+  <TooltipTrigger><Button onClick={fn}>Click</Button></TooltipTrigger>
+
+  // Correct: render prop merges into a single element
+  <TooltipTrigger render={<Button onClick={fn} />}>Click</TooltipTrigger>
+  ```
+
+- Wrapping `ToggleGroupItem` in `TooltipTrigger` without `render` also breaks `:first-child`/`:last-child` CSS selectors for rounded corners on the group.
+- For drag handles and resize rails, prefer the native `title` attribute over `Tooltip` — tooltips appear immediately on hover and interfere with drag interactions, while `title` has a built-in delay.

e2e-tests/snapshots/local_agent_advanced.spec.ts_local-agent---mcp-tool-call-1.aria.yml

@@ -14,7 +14,7 @@
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/mcp-calculator
 - paragraph: I'll calculate the sum of 5 and 3 using the calculator.
@@ -36,7 +36,7 @@
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_ask.spec.ts_local-agent-ask-mode-1.aria.yml

@@ -6,7 +6,7 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
@@ -14,20 +14,20 @@
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/ask-read-file
 - paragraph: Let me read the file to explain its contents.
 - img
 - text: App.tsx Read src/App.tsx
 - paragraph: This is a simple React component that renders a div with the text 'Minimal imported app'. The component is exported as the default export.
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_basic.spec.ts_local-agent---parallel-tool-calls-1.aria.yml

@@ -6,11 +6,15 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/parallel-tools
 - paragraph: I'll create two files for you in parallel.
@@ -27,11 +31,15 @@
 - img
 - text: "src/utils/string.ts Summary: Create string utilities"
 - paragraph: Task completed.
-- button:
+- button "Copy":
   - img
 - img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/local_agent_basic.spec.ts_local-agent---read-then-edit-1.aria.yml

@@ -6,7 +6,7 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
@@ -14,7 +14,7 @@
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/read-then-edit
 - paragraph: Let me first read the current file contents to understand what we're working with.
@@ -26,13 +26,13 @@
 - img
 - text: src/App.tsx
 - paragraph: Done! I've updated the title from 'Minimal imported app' to 'UPDATED imported app'. The change has been applied successfully.
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_code_search.spec.ts_local-agent---code-search-1.aria.yml

@@ -6,13 +6,15 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/code-search
 - paragraph: I'll search for files related to React components in the codebase.
@@ -20,13 +22,13 @@
   - img
   - img
 - paragraph: I found the relevant files! The main React component is in src/App.tsx which handles the app rendering.
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_consent.spec.ts_local-agent---add-dependency-consent-allow-once-1.aria.yml

@@ -6,22 +6,30 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/add-dependency
 - paragraph: I'll add a dependency to your project.
 - img
 - text: Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
 - paragraph: Dependency added done.
-- button:
+- button "Copy":
   - img
 - img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/local_agent_consent.spec.ts_local-agent---add-dependency-consent-always-allow-1.aria.yml

@@ -6,22 +6,30 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/add-dependency
 - paragraph: I'll add a dependency to your project.
 - img
 - text: Do you want to install these packages? @dyad-sh/supabase-management-js Make sure these packages are what you want.
 - paragraph: Dependency added done.
-- button:
+- button "Copy":
   - img
 - img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/local_agent_consent.spec.ts_local-agent---add-dependency-consent-decline-1.aria.yml

@@ -6,11 +6,15 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/add-dependency
 - paragraph: I'll add a dependency to your project.
@@ -24,11 +28,15 @@
 - button "Fix with AI":
   - img
 - paragraph: Dependency added done.
-- button:
+- button "Copy":
   - img
 - img
+- text: claude-opus-4-5
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/local_agent_file_upload.spec.ts_local-agent---upload-file-to-codebase-1.aria.yml

@@ -6,13 +6,15 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/upload-to-codebase
 - paragraph: "Attachments:"
@@ -25,13 +27,13 @@
 - img
 - text: "assets/uploaded-file.png Summary: Upload file to codebase"
 - paragraph: I've successfully uploaded your file to assets/uploaded-file.png in the codebase.
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_grep.spec.ts_local-agent---grep-search-1.aria.yml

@@ -6,31 +6,43 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/grep-search
 - paragraph: I'll search for 'createRoot' in the codebase to find where the React app is initialized.
 - img
 - text: GREP"createRoot"(2 matches)
 - img
+- text: log
+- button "Copy":
+  - img
+- text: log
+- code: "src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
 - paragraph: Now I'll search specifically in .tsx files for 'App' to find component references.
 - img
 - text: GREP"App" in *.tsx(4 matches)
 - img
+- text: log
+- button "Copy":
+  - img
+- text: log
+- code: "src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />); src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App;"
 - paragraph: I found the matches! The React app is initialized in src/main.tsx using createRoot, and the App component is defined in src/App.tsx and imported in src/main.tsx.
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_read_logs.spec.ts_local-agent---read-logs-with-filters-1.aria.yml

@@ -6,18 +6,20 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
+- text: Approved
+- img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/read-logs
 - paragraph: Let me check the recent console logs to see what's happening in the application.
 - img
-- text: /LOGSReading \d+ logs/
+- text: LOGSReading 8 logs
 - img
 - paragraph: Now let me filter for only error logs to identify any issues.
 - img
@@ -28,13 +30,13 @@
 - text: "LOGSReading 0 logs (type: client)"
 - img
 - paragraph: I've reviewed the console logs. The application appears to be running normally with no critical errors detected.
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_search_replace.spec.ts_local-agent---search-replace-edit-1.aria.yml

@@ -6,7 +6,7 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
@@ -14,7 +14,7 @@
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=local-agent/search-replace
 - paragraph: Let me first read the file to see its contents.
@@ -26,13 +26,13 @@
 - img
 - text: src/App.tsx
 - paragraph: Done! I've updated the message using search_replace. The edit was applied successfully.
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/local_agent_summarize.spec.ts_local-agent---summarize-to-new-chat-works-1.aria.yml

@@ -6,13 +6,13 @@
 - img
 - text: file1.txt
 - paragraph: More EOM
-- button:
+- button "Copy":
   - img
 - img
 - text: claude-opus-4-5
 - img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - button "Undo":
   - img

e2e-tests/snapshots/smart_context_balanced.spec.ts_smart-context-balanced---simple-1.aria.yml

 - paragraph: "[dump]"
 - paragraph: "[[dyad-dump-path=*]]"
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
 - img
+- text: auto
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/smart_context_deep.spec.ts_smart-context-deep---read-write-read-1.aria.yml

@@ -3,13 +3,15 @@
 - img
 - text: Index.tsx Read src/pages/Index.tsx
 - paragraph: Done.
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
 - img
+- text: auto
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=update-index-1
 - paragraph: First read
@@ -19,38 +21,46 @@
   - img
 - img
 - text: "src/pages/Index.tsx Summary: replace file"
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
 - img
+- text: auto
+- img
 - text: less than a minute ago
 - img
 - text: wrote 1 file(s)
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: tc=read-index
 - paragraph: "Read the index page:"
 - img
 - text: Index.tsx Read src/pages/Index.tsx
 - paragraph: Done.
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
 - img
+- text: auto
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
   - img
 - paragraph: "[dump]"
 - paragraph: "[[dyad-dump-path=*]]"
-- button:
+- button "Copy":
   - img
 - img
 - text: Approved
 - img
+- text: auto
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/turbo_edits_v2.spec.ts_turbo-edits-v2---search-replace-approve-1.aria.yml

@@ -5,11 +5,15 @@
 - img
 - text: src/pages/Index.tsx
 - paragraph: End of turbo edit
-- button:
+- button "Copy":
   - img
 - img
+- text: auto
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

e2e-tests/snapshots/turbo_edits_v2.spec.ts_turbo-edits-v2---search-replace-fallback-1.aria.yml

@@ -9,17 +9,31 @@
 - text: Warning Could not apply Turbo Edits properly for some of the files; re-generating code......
 - img
 - img
+- text: Index.tsx Read src/pages/Index.tsx
+- img
+- text: Search & Replace Index.tsx
+- img
+- text: src/pages/Index.tsx
+- paragraph: "[[dyad-dump-path=*]]"
+- img
+- text: Warning Could not apply Turbo Edits properly for some of the files; re-generating code......
+- img
+- img
 - text: Index.tsx
 - button "Edit":
   - img
 - img
 - text: "src/pages/Index.tsx Summary: Rewrite file."
 - paragraph: "[[dyad-dump-path=*]]"
-- button:
+- button "Copy":
   - img
 - img
+- text: auto
+- img
 - text: less than a minute ago
-- button "Request ID":
+- button "Copy Request ID":
+  - img
+- button "Undo":
   - img
 - button "Retry":
   - img
\ No newline at end of file

src/components/ChatModeSelector.tsx

@@ -5,6 +5,11 @@ import {
   SelectItem,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { useSettings } from "@/hooks/useSettings";
 import { useFreeAgentQuota } from "@/hooks/useFreeAgentQuota";
 import type { ChatMode } from "@/lib/schemas";
@@ -91,9 +96,11 @@ export function ChatModeSelector() {
       value={selectedMode}
       onValueChange={(v) => v && handleModeChange(v)}
     >
+      <Tooltip>
+        <TooltipTrigger
+          render={
             <MiniSelectTrigger
               data-testid="chat-mode-selector"
-        title={`Open mode menu (${isMac ? "⌘ + ." : "Ctrl + ."} to toggle)`}
               className={cn(
                 "h-6 w-fit px-1.5 py-0 text-xs-sm font-medium shadow-none gap-0.5",
                 selectedMode === "build" || selectedMode === "local-agent"
@@ -101,9 +108,15 @@ export function ChatModeSelector() {
                   : "bg-primary/10 hover:bg-primary/20 focus:bg-primary/20 text-primary border-primary/20 dark:bg-primary/20 dark:hover:bg-primary/30 dark:focus:bg-primary/30",
               )}
               size="sm"
+            />
+          }
         >
           <SelectValue>{getModeDisplayName(selectedMode)}</SelectValue>
-      </MiniSelectTrigger>
+        </TooltipTrigger>
+        <TooltipContent>
+          {`Open mode menu (${isMac ? "\u2318 + ." : "Ctrl + ."} to toggle)`}
+        </TooltipContent>
+      </Tooltip>
       <SelectContent align="start">
         {isProEnabled && (
           <SelectItem value="local-agent">

src/components/ChatPanel.tsx

@@ -14,6 +14,11 @@ import { VersionPane } from "./chat/VersionPane";
 import { ChatError } from "./chat/ChatError";
 import { FreeAgentQuotaBanner } from "./chat/FreeAgentQuotaBanner";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { ArrowDown } from "lucide-react";
 import { useSettings } from "@/hooks/useSettings";
 import { useFreeAgentQuota } from "@/hooks/useFreeAgentQuota";
@@ -166,15 +171,21 @@ export function ChatPanel({
               {/* Scroll to bottom button */}
               {showScrollButton && (
                 <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-10">
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
                         <Button
                           onClick={handleScrollButtonClick}
                           size="icon"
                           className="rounded-full shadow-lg hover:shadow-xl transition-all border border-border/50 backdrop-blur-sm bg-background/95 hover:bg-accent"
                           variant="outline"
-                    title={"Scroll to bottom"}
+                        />
+                      }
                     >
                       <ArrowDown className="h-4 w-4" />
-                  </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Scroll to bottom</TooltipContent>
+                  </Tooltip>
                 </div>
               )}
             </div>

src/components/CopyErrorMessage.tsx

 import { Copy, Check } from "lucide-react";
 import { useState } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface CopyErrorMessageProps {
   errorMessage: string;
@@ -24,6 +29,9 @@ export const CopyErrorMessage = ({
   };
 
   return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
           <button
             onClick={handleCopy}
             className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${
@@ -31,7 +39,8 @@ export const CopyErrorMessage = ({
                 ? "bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300"
                 : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
             } ${className}`}
-      title={isCopied ? "Copied!" : "Copy error message"}
+          />
+        }
       >
         {isCopied ? (
           <>
@@ -44,6 +53,10 @@ export const CopyErrorMessage = ({
             <span>Copy</span>
           </>
         )}
-    </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {isCopied ? "Copied!" : "Copy error message"}
+      </TooltipContent>
+    </Tooltip>
   );
 };

src/components/CustomErrorToast.tsx

 import React from "react";
 import { toast } from "sonner";
 import { X, Copy, Check } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface CustomErrorToastProps {
   message: string;
@@ -41,13 +46,14 @@ export function CustomErrorToast({
 
               {/* Action buttons */}
               <div className="flex items-center space-x-1.5 ml-auto">
+                <Tooltip>
+                  <TooltipTrigger>
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
                         handleCopy();
                       }}
                       className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-100/70 rounded-lg transition-all duration-150"
-                  title="Copy to clipboard"
                     >
                       {copied ? (
                         <Check className="w-4 h-4 text-green-500" />
@@ -55,16 +61,23 @@ export function CustomErrorToast({
                         <Copy className="w-4 h-4" />
                       )}
                     </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Copy to clipboard</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger>
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
                         handleClose();
                       }}
                       className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-100/70 rounded-lg transition-all duration-150"
-                  title="Close"
                     >
                       <X className="w-4 h-4" />
                     </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Close</TooltipContent>
+                </Tooltip>
               </div>
             </div>
             <div>

src/components/GithubBranchManager.tsx

@@ -34,6 +34,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import {
   Dialog,
   DialogContent,
@@ -414,14 +419,22 @@ export function GithubBranchManager({
         </Select>
 
         <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger
+              render={
                 <DropdownMenuTrigger
-            className={cn(buttonVariants({ variant: "outline", size: "icon" }))}
-            title="Branch actions"
+                  className={cn(
+                    buttonVariants({ variant: "outline", size: "icon" }),
+                  )}
                   aria-label="Branch actions"
                   data-testid="branch-actions-menu-trigger"
+                />
+              }
             >
               <EllipsisVertical className="h-4 w-4" />
-          </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>Branch actions</TooltipContent>
+          </Tooltip>
           <DropdownMenuContent align="end">
             <DropdownMenuItem
               onClick={() => setShowCreateDialog(true)}

src/components/ProModeSelector.tsx

@@ -7,6 +7,11 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { Sparkles, Info } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { useSettings } from "@/hooks/useSettings";
 import { ipc } from "@/ipc/types";
 import { hasDyadProKey, type UserSettings } from "@/lib/schemas";
@@ -57,13 +62,17 @@ export function ProModeSelector() {
 
   return (
     <Popover>
-      <PopoverTrigger
-        className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-primary/50 bg-background shadow-sm hover:bg-primary/10 h-8 px-1.5 gap-1.5 shadow-primary/10 hover:shadow-md hover:shadow-primary/15"
-        title="Configure Dyad Pro settings"
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <PopoverTrigger className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-primary/50 bg-background shadow-sm hover:bg-primary/10 h-8 px-1.5 gap-1.5 shadow-primary/10 hover:shadow-md hover:shadow-primary/15" />
+          }
         >
           <Sparkles className="h-4 w-4 text-primary" />
           <span className="text-primary font-medium text-xs-sm">Pro</span>
-      </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>Configure Dyad Pro settings</TooltipContent>
+      </Tooltip>
       <PopoverContent className="w-80 border-primary/20">
         <div className="space-y-4">
           <div className="space-y-1">
@@ -205,36 +214,58 @@ function TurboEditsSelector({
         className="inline-flex rounded-md border border-input"
         data-testid="turbo-edits-selector"
       >
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <Button
                 variant={currentValue === "off" ? "default" : "ghost"}
                 size="sm"
                 onClick={() => onValueChange("off")}
                 disabled={!isTogglable}
                 className="rounded-r-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
-          title="Disable Turbo Edits"
+              />
+            }
           >
             Off
-        </Button>
+          </TooltipTrigger>
+          <TooltipContent>Disable Turbo Edits</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <Button
                 variant={currentValue === "v1" ? "default" : "ghost"}
                 size="sm"
                 onClick={() => onValueChange("v1")}
                 disabled={!isTogglable}
                 className="rounded-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
-          title="Uses a smaller model to complete edits"
+              />
+            }
           >
             Classic
-        </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            Uses a smaller model to complete edits
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <Button
                 variant={currentValue === "v2" ? "default" : "ghost"}
                 size="sm"
                 onClick={() => onValueChange("v2")}
                 disabled={!isTogglable}
                 className="rounded-l-none h-8 px-3 text-xs flex-shrink-0"
-          title="Find and replaces specific text blocks"
+              />
+            }
           >
             Search & replace
-        </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            Find and replaces specific text blocks
+          </TooltipContent>
+        </Tooltip>
       </div>
     </div>
   );
@@ -282,36 +313,59 @@ function SmartContextSelector({
         className="inline-flex rounded-md border border-input"
         data-testid="smart-context-selector"
       >
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <Button
                 variant={currentValue === "off" ? "default" : "ghost"}
                 size="sm"
                 onClick={() => onValueChange("off")}
                 disabled={!isTogglable}
                 className="rounded-r-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
-          title="Disable Smart Context"
+              />
+            }
           >
             Off
-        </Button>
+          </TooltipTrigger>
+          <TooltipContent>Disable Smart Context</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <Button
                 variant={currentValue === "balanced" ? "default" : "ghost"}
                 size="sm"
                 onClick={() => onValueChange("balanced")}
                 disabled={!isTogglable}
                 className="rounded-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
-          title="Selects most relevant files with balanced context size"
+              />
+            }
           >
             Balanced
-        </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            Selects most relevant files with balanced context size
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <Button
                 variant={currentValue === "deep" ? "default" : "ghost"}
                 size="sm"
                 onClick={() => onValueChange("deep")}
                 disabled={!isTogglable}
                 className="rounded-l-none h-8 px-3 text-xs flex-shrink-0"
-          title="Experimental: Keeps full conversation history for maximum context and cache-optimized to control costs"
+              />
+            }
           >
             Deep
-        </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            Experimental: Keeps full conversation history for maximum context
+            and cache-optimized to control costs
+          </TooltipContent>
+        </Tooltip>
       </div>
     </div>
   );

src/components/ProviderSettings.tsx

@@ -17,6 +17,11 @@ import { AlertTriangle } from "lucide-react";
 import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -123,26 +128,38 @@ export function ProviderSettingsGrid() {
                       className="flex items-center justify-end"
                       onClick={(e) => e.stopPropagation()}
                     >
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
                             <Button
                               data-testid="edit-custom-provider"
                               variant="ghost"
                               size="sm"
                               className="h-8 w-8 p-0 hover:bg-muted rounded-md"
-                        title="Edit Provider"
                               onClick={() => handleEditProvider(provider)}
+                            />
+                          }
                         >
                           <Edit className="h-4 w-4" />
-                      </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Edit Provider</TooltipContent>
+                      </Tooltip>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
                             <Button
                               data-testid="delete-custom-provider"
                               variant="ghost"
                               size="sm"
                               className="h-8 w-8 p-0 text-destructive hover:text-destructive hover:bg-destructive/10 rounded-md"
-                        title="Delete Provider"
                               onClick={() => setProviderToDelete(provider.id)}
+                            />
+                          }
                         >
                           <Trash2 className="h-4 w-4" />
-                      </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Delete Provider</TooltipContent>
+                      </Tooltip>
                     </div>
                   )}
                   <CardTitle className="text-lg font-medium mb-2">

src/components/SupabaseConnector.tsx

@@ -38,6 +38,11 @@ import connectSupabaseDark from "../../assets/supabase/connect-supabase-dark.svg
 import connectSupabaseLight from "../../assets/supabase/connect-supabase-light.svg";
 
 import { ExternalLink, Plus, RefreshCw, Trash2 } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { useTheme } from "@/contexts/ThemeContext";
 import { isSupabaseConnected } from "@/lib/schemas";
 
@@ -268,17 +273,23 @@ export function SupabaseConnector({ appId }: { appId: number }) {
           <CardTitle className="flex items-center justify-between">
             Supabase Projects
             <div className="flex items-center gap-2">
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <Button
                       variant="outline"
                       size="icon"
                       onClick={() => refetchProjects()}
                       disabled={isFetchingProjects}
-                title="Refresh projects"
+                    />
+                  }
                 >
                   <RefreshCw
                     className={`h-4 w-4 ${isFetchingProjects ? "animate-spin" : ""}`}
                   />
-              </Button>
+                </TooltipTrigger>
+                <TooltipContent>Refresh projects</TooltipContent>
+              </Tooltip>
               <Button
                 variant="outline"
                 size="sm"
@@ -333,6 +344,9 @@ export function SupabaseConnector({ appId }: { appId: number }) {
                           </span>
                         )}
                       </div>
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
                             <Button
                               variant="ghost"
                               size="sm"
@@ -340,11 +354,14 @@ export function SupabaseConnector({ appId }: { appId: number }) {
                               onClick={() =>
                                 handleDeleteOrganization(org.organizationSlug)
                               }
-                        title="Disconnect organization"
+                            />
+                          }
                         >
                           <Trash2 className="h-3.5 w-3.5 mr-1" />
                           <span className="text-xs">Disconnect</span>
-                      </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Disconnect organization</TooltipContent>
+                      </Tooltip>
                     </div>
                   ))}
                 </div>

src/components/SupabaseIntegration.tsx

@@ -5,6 +5,11 @@ import { Label } from "@/components/ui/label";
 // We might need a Supabase icon here, but for now, let's use a generic one or text.
 // import { Supabase } from "lucide-react"; // Placeholder
 import { DatabaseZap, Trash2 } from "lucide-react"; // Using DatabaseZap as a placeholder
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { useSettings } from "@/hooks/useSettings";
 import { useSupabase } from "@/hooks/useSupabase";
 import { showSuccess, showError } from "@/lib/toast";
@@ -120,16 +125,24 @@ export function SupabaseIntegration() {
                 </span>
               )}
             </div>
+            <Tooltip>
+              <TooltipTrigger
+                render={
                   <Button
                     variant="ghost"
                     size="sm"
                     className="h-7 px-2 text-muted-foreground hover:text-destructive shrink-0"
-              onClick={() => handleDeleteOrganization(org.organizationSlug)}
-              title="Disconnect organization"
+                    onClick={() =>
+                      handleDeleteOrganization(org.organizationSlug)
+                    }
+                  />
+                }
               >
                 <Trash2 className="h-3.5 w-3.5 mr-1" />
                 <span className="text-xs">Disconnect</span>
-            </Button>
+              </TooltipTrigger>
+              <TooltipContent>Disconnect organization</TooltipContent>
+            </Tooltip>
           </div>
         ))}
       </div>

src/components/chat/ChatInput.tsx

@@ -75,6 +75,11 @@ import { VisualEditingChangesDialog } from "@/components/preview_panel/VisualEdi
 import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
 import { useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "@/lib/queryKeys";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   ContextLimitBanner,
   shouldShowContextLimitBanner,
@@ -467,16 +472,25 @@ export function ChatInput({ chatId }: { chatId?: number }) {
           ) : (
             selectedComponents.length > 0 && (
               <div className="border-b border-border p-3 bg-muted/30">
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
                       <button
                         onClick={() => {
                           ipc.system.openExternalUrl("https://dyad.sh/pro");
                         }}
                         className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors cursor-pointer"
-                  title="Visual editing lets you make UI changes without AI and is a Pro-only feature"
+                      />
+                    }
                   >
                     <Lock size={16} />
                     <span className="font-medium">Visual editor (Pro)</span>
-                </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Visual editing lets you make UI changes without AI and is a
+                    Pro-only feature
+                  </TooltipContent>
+                </Tooltip>
               </div>
             )
           )}
@@ -505,25 +519,39 @@ export function ChatInput({ chatId }: { chatId?: number }) {
             />
 
             {isStreaming ? (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <button
                       onClick={handleCancel}
+                      aria-label="Cancel generation"
                       className="px-2 py-2 mt-1 mr-1 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg"
-                title="Cancel generation"
+                    />
+                  }
                 >
                   <StopCircleIcon size={20} />
-              </button>
+                </TooltipTrigger>
+                <TooltipContent>Cancel generation</TooltipContent>
+              </Tooltip>
             ) : (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <button
                       onClick={handleSubmit}
                       disabled={
                         (!inputValue.trim() && attachments.length === 0) ||
                         disableSendButton
                       }
+                      aria-label="Send message"
                       className="px-2 py-2 mt-1 mr-1 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
-                title="Send message"
+                    />
+                  }
                 >
                   <SendHorizontalIcon size={20} />
-              </button>
+                </TooltipTrigger>
+                <TooltipContent>Send message</TooltipContent>
+              </Tooltip>
             )}
           </div>
           <div className="pl-2 pr-1 flex items-center justify-between pb-2">
@@ -557,15 +585,21 @@ function SuggestionButton({
 }) {
   const { isStreaming } = useStreamChat();
   return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
           <Button
             disabled={isStreaming}
             variant="outline"
             size="sm"
             onClick={onClick}
-      title={tooltipText}
+          />
+        }
       >
         {children}
-    </Button>
+      </TooltipTrigger>
+      <TooltipContent>{tooltipText}</TooltipContent>
+    </Tooltip>
   );
 }
 

src/components/chat/ChatMessage.tsx

@@ -21,6 +21,11 @@ import { useAtomValue } from "jotai";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface ChatMessageProps {
   message: Message;
@@ -122,11 +127,16 @@ const ChatMessage = ({ message, isLastMessage }: ChatMessageProps) => {
               {message.role === "assistant" &&
                 message.content &&
                 !isStreaming && (
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
                         <button
                           data-testid="copy-message-button"
                           onClick={handleCopyFormatted}
-                    title={copied ? "Copied!" : "Copy"}
+                          aria-label="Copy"
                           className="flex items-center space-x-1 px-2 py-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors duration-200 cursor-pointer"
+                        />
+                      }
                     >
                       {copied ? (
                         <Check className="h-4 w-4 text-green-500" />
@@ -134,7 +144,11 @@ const ChatMessage = ({ message, isLastMessage }: ChatMessageProps) => {
                         <Copy className="h-4 w-4" />
                       )}
                       <span className="hidden sm:inline"></span>
-                  </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {copied ? "Copied!" : "Copy"}
+                    </TooltipContent>
+                  </Tooltip>
                 )}
               <div className="flex flex-wrap gap-2">
                 {message.approvalState && (
@@ -187,6 +201,9 @@ const ChatMessage = ({ message, isLastMessage }: ChatMessageProps) => {
               </div>
             )}
             {message.requestId && (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <button
                       onClick={() => {
                         if (!message.requestId) return;
@@ -206,12 +223,10 @@ const ChatMessage = ({ message, isLastMessage }: ChatMessageProps) => {
                             // noop
                           });
                       }}
-                title={
-                  copiedRequestId
-                    ? "Copied!"
-                    : `Copy Request ID: ${message.requestId.slice(0, 8)}...`
-                }
+                      aria-label="Copy Request ID"
                       className="flex items-center space-x-1 px-1 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors duration-200 cursor-pointer"
+                    />
+                  }
                 >
                   {copiedRequestId ? (
                     <Check className="h-3 w-3 text-green-500" />
@@ -221,7 +236,13 @@ const ChatMessage = ({ message, isLastMessage }: ChatMessageProps) => {
                   <span className="text-xs">
                     {copiedRequestId ? "Copied" : "Request ID"}
                   </span>
-              </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {copiedRequestId
+                    ? "Copied!"
+                    : `Copy Request ID: ${message.requestId.slice(0, 8)}...`}
+                </TooltipContent>
+              </Tooltip>
             )}
             {isLastMessage && message.totalTokens && (
               <div

src/components/chat/ContextLimitBanner.tsx

 import { AlertTriangle, ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useSummarizeInNewChat } from "./SummarizeInNewChatButton";
 
 const CONTEXT_LIMIT_THRESHOLD = 40_000;
@@ -52,16 +57,22 @@ export function ContextLimitBanner({
         <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
         <span>{message}</span>
       </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
             <Button
               onClick={handleSummarize}
               variant="outline"
               size="sm"
               className="h-6 px-2 text-xs border-amber-500/40 bg-amber-500/5 text-amber-600 dark:text-amber-500 hover:bg-amber-500/20 hover:border-amber-500/60"
-        title="Summarize to new chat"
+            />
+          }
         >
           Summarize
           <ArrowRight className="h-3 w-3 ml-1" />
-      </Button>
+        </TooltipTrigger>
+        <TooltipContent>Summarize to new chat</TooltipContent>
+      </Tooltip>
     </div>
   );
 }

src/components/chat/HomeChatInput.tsx

 import { SendIcon, StopCircleIcon } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 import { useSettings } from "@/hooks/useSettings";
 import { homeChatInputValueAtom } from "@/atoms/chatAtoms"; // Use a different atom for home input
@@ -102,21 +107,37 @@ export function HomeChatInput({
             />
 
             {isStreaming ? (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <button
-                className="px-2 py-2 mt-1 mr-1 text-(--sidebar-accent-fg) rounded-lg opacity-50 cursor-not-allowed" // Indicate disabled state
-                title="Cancel generation (unavailable here)"
+                      aria-label="Cancel generation (unavailable here)"
+                      className="px-2 py-2 mt-1 mr-1 text-(--sidebar-accent-fg) rounded-lg opacity-50 cursor-not-allowed"
+                    />
+                  }
                 >
                   <StopCircleIcon size={20} />
-              </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  Cancel generation (unavailable here)
+                </TooltipContent>
+              </Tooltip>
             ) : (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <button
                       onClick={handleCustomSubmit}
                       disabled={!inputValue.trim() && attachments.length === 0}
+                      aria-label="Send message"
                       className="px-2 py-2 mt-1 mr-1 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
-                title="Send message"
+                    />
+                  }
                 >
                   <SendIcon size={20} />
-              </button>
+                </TooltipTrigger>
+                <TooltipContent>Send message</TooltipContent>
+              </Tooltip>
             )}
           </div>
           <div className="pl-2 pr-1 flex items-center justify-between pb-2">

src/components/chat/SelectedComponentDisplay.tsx

@@ -5,6 +5,11 @@ import {
 } from "@/atoms/previewAtoms";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { Code2, X } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 export function SelectedComponentsDisplay() {
   const [selectedComponents, setSelectedComponents] = useAtom(
@@ -57,13 +62,19 @@ export function SelectedComponentsDisplay() {
         <span className="text-xs font-medium text-muted-foreground">
           Selected Components ({selectedComponents.length})
         </span>
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={handleClearAll}
                 className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-          title="Clear all selected components"
+              />
+            }
           >
             Clear all
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Clear all selected components</TooltipContent>
+        </Tooltip>
       </div>
       {selectedComponents.map((selectedComponent, index) => (
         <div key={selectedComponent.id} className="mb-1 last:mb-0">
@@ -89,13 +100,20 @@ export function SelectedComponentsDisplay() {
                 </span>
               </div>
             </div>
+            <Tooltip>
+              <TooltipTrigger
+                render={
                   <button
                     onClick={() => handleRemoveComponent(index)}
+                    aria-label="Deselect component"
                     className="ml-2 flex-shrink-0 rounded-full p-0.5 hover:bg-indigo-600/20"
-              title="Deselect component"
+                  />
+                }
               >
                 <X size={18} className="text-indigo-600 dark:text-indigo-400" />
-            </button>
+              </TooltipTrigger>
+              <TooltipContent>Deselect component</TooltipContent>
+            </Tooltip>
           </div>
         </div>
       ))}

src/components/preview_panel/ActionHeader.tsx

@@ -24,6 +24,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { showError, showSuccess } from "@/lib/toast";
 import { useMutation } from "@tanstack/react-query";
 import { useCheckProblems } from "@/hooks/useCheckProblems";
@@ -170,19 +175,25 @@ export const ActionHeader = () => {
     badge?: React.ReactNode,
   ) => {
     return (
+      <Tooltip>
+        <TooltipTrigger
+          render={
             <button
               data-testid={testId}
               ref={ref}
               className="no-app-region-drag cursor-pointer relative flex items-center gap-0.5 px-2 py-0.5 rounded-md text-xs font-medium z-10 hover:bg-[var(--background)] flex-col"
               onClick={() => selectPanel(mode)}
-        title={isCompact ? text : undefined}
+            />
+          }
         >
           {icon}
           <span>
             {!isCompact && <span>{text}</span>}
             {badge}
           </span>
-      </button>
+        </TooltipTrigger>
+        {isCompact && <TooltipContent>{text}</TooltipContent>}
+      </Tooltip>
     );
   };
   const iconSize = 15;
@@ -255,13 +266,19 @@ export const ActionHeader = () => {
       <div className="flex items-center gap-1">
         <ChatActivityButton />
         <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger
+              render={
                 <DropdownMenuTrigger
                   data-testid="preview-more-options-button"
                   className="no-app-region-drag flex items-center justify-center p-1.5 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
-            title="More options"
+                />
+              }
             >
               <MoreVertical size={16} />
-          </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>More options</TooltipContent>
+          </Tooltip>
           <DropdownMenuContent align="end" className="w-60">
             <DropdownMenuItem onClick={onCleanRestart}>
               <Cog size={16} />

src/components/preview_panel/AnnotatorToolbar.tsx

@@ -10,6 +10,11 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ToolbarColorPicker } from "./ToolbarColorPicker";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface AnnotatorToolbarProps {
   tool: "select" | "draw" | "text";
@@ -46,108 +51,158 @@ export const AnnotatorToolbar = ({
     <div className="flex items-center justify-center p-2 border-b space-x-2">
       {/* Tool Selection Buttons */}
       <div className="flex space-x-1">
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={() => onToolChange("select")}
                 aria-label="Select"
-          title="Select"
                 className={cn(
                   "p-1 rounded transition-colors duration-200",
                   tool === "select"
                     ? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
                     : " text-purple-700 hover:bg-purple-200  dark:text-purple-300 dark:hover:bg-purple-900",
                 )}
+              />
+            }
           >
             <MousePointer2 size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Select</TooltipContent>
+        </Tooltip>
 
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={() => onToolChange("draw")}
                 aria-label="Draw"
-          title="Draw"
                 className={cn(
                   "p-1 rounded transition-colors duration-200",
                   tool === "draw"
                     ? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
                     : " text-purple-700 hover:bg-purple-200  dark:text-purple-300 dark:hover:bg-purple-900",
                 )}
+              />
+            }
           >
             <Pencil size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Draw</TooltipContent>
+        </Tooltip>
 
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={() => onToolChange("text")}
                 aria-label="Text"
-          title="Text"
                 className={cn(
                   "p-1 rounded transition-colors duration-200",
                   tool === "text"
                     ? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
                     : "text-purple-700 hover:bg-purple-200  dark:text-purple-300 dark:hover:bg-purple-900",
                 )}
+              />
+            }
           >
             <Type size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Text</TooltipContent>
+        </Tooltip>
 
-        <div
-          className="p-1 rounded transition-colors duration-200 hover:bg-purple-200 dark:hover:bg-purple-900"
-          title="Color"
-        >
+        <Tooltip>
+          <TooltipTrigger>
+            <div className="p-1 rounded transition-colors duration-200 hover:bg-purple-200 dark:hover:bg-purple-900">
               <ToolbarColorPicker color={color} onChange={onColorChange} />
             </div>
+          </TooltipTrigger>
+          <TooltipContent>Color</TooltipContent>
+        </Tooltip>
 
         <div className="w-px bg-gray-200 dark:bg-gray-700 h-4" />
 
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={onDelete}
                 aria-label="Delete"
-          title="Delete Selected"
                 className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200  dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
                 disabled={!selectedId}
+              />
+            }
           >
             <Trash2 size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Delete Selected</TooltipContent>
+        </Tooltip>
 
         <div className="w-px bg-gray-200 dark:bg-gray-700 h-4" />
 
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={onUndo}
                 aria-label="Undo"
-          title="Undo"
                 className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200  dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
                 disabled={historyStep === 0}
+              />
+            }
           >
             <Undo size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Undo</TooltipContent>
+        </Tooltip>
 
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={onRedo}
                 aria-label="Redo"
-          title="Redo"
                 className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200  dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
                 disabled={historyStep === historyLength - 1}
+              />
+            }
           >
             <Redo size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Redo</TooltipContent>
+        </Tooltip>
 
         <div className="w-px bg-gray-200 dark:bg-gray-700 h-4" />
 
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={onSubmit}
                 aria-label="Add to Chat"
-          title="Add to Chat"
                 className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
                 disabled={!hasSubmitHandler}
+              />
+            }
           >
             <Check size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Add to Chat</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 onClick={onDeactivate}
                 aria-label="Close Annotator"
-          title="Close Annotator"
                 className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900"
+              />
+            }
           >
             <X size={16} />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Close Annotator</TooltipContent>
+        </Tooltip>
       </div>
     </div>
   );

src/components/preview_panel/CodeView.tsx

@@ -3,6 +3,11 @@ import { FileTree } from "./FileTree";
 import { useEffect, useState } from "react";
 import { useLoadApp } from "@/hooks/useLoadApp";
 import { RefreshCw, Maximize2, Minimize2 } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { useAtomValue } from "jotai";
 import { selectedFileAtom } from "@/atoms/viewAtoms";
 
@@ -59,23 +64,37 @@ export const CodeView = ({ loading, app }: CodeViewProps) => {
       >
         {/* Toolbar */}
         <div className="flex items-center p-2 border-b space-x-2">
+          <Tooltip>
+            <TooltipTrigger
+              render={
                 <button
                   onClick={() => refreshApp()}
                   className="p-1 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
                   disabled={loading || !app.id}
-            title="Refresh Files"
+                />
+              }
             >
               <RefreshCw size={16} />
-          </button>
+            </TooltipTrigger>
+            <TooltipContent>Refresh Files</TooltipContent>
+          </Tooltip>
           <div className="text-sm text-gray-500">{app.files.length} files</div>
           <div className="flex-1" />
+          <Tooltip>
+            <TooltipTrigger
+              render={
                 <button
                   onClick={() => setIsFullscreen((value) => !value)}
                   className="p-1 rounded hover:bg-gray-200"
-            title={isFullscreen ? "Exit full screen" : "Enter full screen"}
+                />
+              }
             >
               {isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
-          </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {isFullscreen ? "Exit full screen" : "Enter full screen"}
+            </TooltipContent>
+          </Tooltip>
         </div>
 
         {/* Content */}

src/components/preview_panel/ConsoleEntry.tsx

@@ -7,6 +7,11 @@ import {
 } from "lucide-react";
 import { useSetAtom } from "jotai";
 import { chatInputValueAtom } from "@/atoms/chatAtoms";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface ConsoleEntryProps {
   type: "server" | "client" | "edge-function" | "network-requests";
@@ -120,14 +125,20 @@ export const ConsoleEntryComponent = (props: ConsoleEntryProps) => {
           )}
         </span>
       </div>
+      <Tooltip>
+        <TooltipTrigger
+          render={
             <button
               onClick={handleSendToChat}
-        title="Send to chat"
               className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
               data-testid="send-to-chat"
+            />
+          }
         >
           <MessageSquare size={12} className="text-gray-500" />
-      </button>
+        </TooltipTrigger>
+        <TooltipContent>Send to chat</TooltipContent>
+      </Tooltip>
     </div>
   );
 };

src/components/preview_panel/ConsoleFilters.tsx

 import { Filter, X, Trash2 } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface ConsoleFiltersProps {
   levelFilter: "all" | "info" | "warn" | "error";
@@ -109,14 +114,20 @@ export const ConsoleFilters = ({
       )}
 
       {/* Clear logs button */}
+      <Tooltip>
+        <TooltipTrigger
+          render={
             <button
               onClick={onClearLogs}
               className="p-1 border border-border rounded bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
               data-testid="clear-logs-button"
-        title="Clear logs"
+            />
+          }
         >
           <Trash2 size={14} />
-      </button>
+        </TooltipTrigger>
+        <TooltipContent>Clear logs</TooltipContent>
+      </Tooltip>
 
       <div className="ml-auto text-xs text-gray-500">{totalLogs} logs</div>
     </div>

src/components/preview_panel/DraggableTextInput.tsx

 import React, { useState, useRef, useEffect } from "react";
 import { X } from "lucide-react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface DraggableTextInputProps {
   input: {
@@ -158,6 +163,9 @@ export const DraggableTextInput = ({
         />
 
         {/* Close Button - Rightmost */}
+        <Tooltip>
+          <TooltipTrigger
+            render={
               <button
                 className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-colors z-10 group"
                 onClick={(e) => {
@@ -165,11 +173,14 @@ export const DraggableTextInput = ({
                   e.stopPropagation();
                   onRemove(input.id);
                 }}
-          title="Remove text input"
                 type="button"
+              />
+            }
           >
             <X className="w-3 h-3 text-gray-400 dark:text-gray-500 group-hover:text-red-600 dark:group-hover:text-red-400" />
-        </button>
+          </TooltipTrigger>
+          <TooltipContent>Remove text input</TooltipContent>
+        </Tooltip>
       </div>
     </div>
   );

src/components/preview_panel/FileEditor.tsx

@@ -12,6 +12,11 @@ import { useSettings } from "@/hooks/useSettings";
 import { useCheckProblems } from "@/hooks/useCheckProblems";
 import { getLanguage } from "@/utils/get_language";
 import { queryKeys } from "@/lib/queryKeys";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 interface FileEditorProps {
   appId: number | null;
@@ -53,6 +58,9 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
           ))}
         </div>
         <div className="flex items-center gap-2 flex-shrink-0 ml-2">
+          <Tooltip>
+            <TooltipTrigger
+              render={
                 <Button
                   variant="ghost"
                   size="sm"
@@ -60,10 +68,15 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
                   disabled={!hasUnsavedChanges || isSaving}
                   className="h-6 w-6 p-0"
                   data-testid="save-file-button"
-            title={hasUnsavedChanges ? "Save changes" : "No unsaved changes"}
+                />
+              }
             >
               <Save size={12} />
-          </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {hasUnsavedChanges ? "Save changes" : "No unsaved changes"}
+            </TooltipContent>
+          </Tooltip>
           {hasUnsavedChanges && (
             <Circle
               size={8}

src/components/preview_panel/PreviewIframe.tsx

@@ -57,6 +57,11 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { useRunApp } from "@/hooks/useRunApp";
 import { useSettings } from "@/hooks/useSettings";
 import { useShortcut } from "@/hooks/useShortcut";
@@ -989,18 +994,29 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
         <div className="flex items-center p-2 border-b space-x-2">
           {/* Navigation Buttons */}
           <div className="flex space-x-1">
+            <Tooltip>
+              <TooltipTrigger
+                render={
                   <button
                     onClick={() => setIsChatPanelHidden(!isChatPanelHidden)}
                     className="p-1 rounded transition-colors duration-200 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
                     data-testid="preview-toggle-chat-panel-button"
-              title={isChatPanelHidden ? "Show chat" : "Hide chat"}
+                  />
+                }
               >
                 {isChatPanelHidden ? (
                   <Maximize2 size={16} />
                 ) : (
                   <Minimize2 size={16} />
                 )}
-            </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {isChatPanelHidden ? "Show chat" : "Hide chat"}
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={
                   <button
                     onClick={handleActivateComponentSelector}
                     className={`p-1 rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${
@@ -1009,17 +1025,25 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
                         : " text-purple-700 hover:bg-purple-200  dark:text-purple-300 dark:hover:bg-purple-900"
                     }`}
                     disabled={
-                loading || !selectedAppId || !isComponentSelectorInitialized
+                      loading ||
+                      !selectedAppId ||
+                      !isComponentSelectorInitialized
                     }
                     data-testid="preview-pick-element-button"
-              title={
-                isPicking
-                  ? "Deactivate component selector"
-                  : `Select component (${isMac ? "⌘ + ⇧ + C" : "Ctrl + ⇧ + C"})`
+                  />
                 }
               >
                 <MousePointerClick size={16} />
-            </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {isPicking
+                  ? "Deactivate component selector"
+                  : `Select component (${isMac ? "⌘ + ⇧ + C" : "Ctrl + ⇧ + C"})`}
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={
                   <button
                     onClick={handleAnnotatorClick}
                     className={`p-1 rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${
@@ -1034,12 +1058,15 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
                       !isComponentSelectorInitialized
                     }
                     data-testid="preview-annotator-button"
-              title={
-                annotatorMode ? "Annotator mode active" : "Activate annotator"
+                  />
                 }
               >
                 <Pen size={16} />
-            </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {annotatorMode ? "Annotator mode active" : "Activate annotator"}
+              </TooltipContent>
+            </Tooltip>
             <button
               className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
               disabled={!canGoBack || loading || !selectedAppId}
@@ -1106,14 +1133,20 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
 
           {/* Action Buttons */}
           <div className="flex space-x-1">
+            <Tooltip>
+              <TooltipTrigger
+                render={
                   <button
                     onClick={onRestart}
                     className="flex items-center space-x-1 px-3 py-1 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
-              title="Restart App"
+                  />
+                }
               >
                 <Power size={16} />
                 <span>Restart</span>
-            </button>
+              </TooltipTrigger>
+              <TooltipContent>Restart App</TooltipContent>
+            </Tooltip>
             <button
               data-testid="preview-open-browser-button"
               onClick={() => {
@@ -1128,6 +1161,9 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
 
             {/* Device Mode Button */}
             <Popover open={isDevicePopoverOpen} modal={false}>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <PopoverTrigger
                       data-testid="device-mode-button"
                       onClick={() => {
@@ -1138,12 +1174,16 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
                       }}
                       className={cn(
                         "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-gray-300",
-                  deviceMode !== "desktop" && "bg-gray-200 dark:bg-gray-700",
+                        deviceMode !== "desktop" &&
+                          "bg-gray-200 dark:bg-gray-700",
                       )}
-                title="Device Mode"
+                    />
+                  }
                 >
                   <MonitorSmartphone size={16} />
-              </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent>Device Mode</TooltipContent>
+              </Tooltip>
               <PopoverContent className="w-auto p-2">
                 <ToggleGroup
                   value={[deviceMode]}
@@ -1159,27 +1199,45 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
                   }}
                   variant="outline"
                 >
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
                         <ToggleGroupItem
                           value="desktop"
                           aria-label="Desktop view"
-                    title="Desktop"
+                        />
+                      }
                     >
                       <Monitor size={16} />
-                  </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>Desktop</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
                         <ToggleGroupItem
                           value="tablet"
                           aria-label="Tablet view"
-                    title="Tablet"
+                        />
+                      }
                     >
                       <Tablet size={16} className="scale-x-130" />
-                  </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>Tablet</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
                         <ToggleGroupItem
                           value="mobile"
                           aria-label="Mobile view"
-                    title="Mobile"
+                        />
+                      }
                     >
                       <Smartphone size={16} />
-                  </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>Mobile</TooltipContent>
+                  </Tooltip>
                 </ToggleGroup>
               </PopoverContent>
             </Popover>

src/components/preview_panel/VisualEditingToolbar.tsx

 import { useState, useEffect } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { X, Move, Square, Palette, Type } from "lucide-react";
 import { Label } from "@/components/ui/label";
 import { ComponentSelection } from "@/ipc/types";
@@ -314,14 +319,20 @@ export function VisualEditingToolbar({
         left: `${toolbarLeft}px`,
       }}
     >
+      <Tooltip>
+        <TooltipTrigger
+          render={
             <button
               onClick={handleDeselectComponent}
               className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-[#7f22fe] dark:text-gray-200"
               aria-label="Deselect Component"
-        title="Deselect Component"
+            />
+          }
         >
           <X size={16} />
-      </button>
+        </TooltipTrigger>
+        <TooltipContent>Deselect Component</TooltipContent>
+      </Tooltip>
 
       {isDynamic ? (
         <div className="flex items-center px-2 py-1 text-yellow-800 dark:text-yellow-200 rounded text-xs font-medium">

src/components/ui/sidebar.tsx

@@ -513,7 +513,7 @@ function SidebarMenuButton<T extends React.ElementType = "button">({
 
   return (
     <Tooltip>
-      <TooltipTrigger>{button}</TooltipTrigger>
+      <TooltipTrigger render={button} />
       <TooltipContent
         side="right"
         align="center"

src/components/ui/tooltip.tsx

@@ -18,11 +18,7 @@ function TooltipProvider({
 }
 
 function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
 function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
@@ -32,7 +28,7 @@ function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
 function TooltipContent({
   className,
   side = "top",
-  sideOffset = 0,
+  sideOffset = 4,
   align = "center",
   alignOffset = 0,
   children,
@@ -54,13 +50,13 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "bg-primary text-primary-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance origin-(--transform-origin)",
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)",
             className,
           )}
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+          <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>

src/pages/app-details.tsx

@@ -18,6 +18,11 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import { Input } from "@/components/ui/input";
 import {
   Dialog,
@@ -357,6 +362,9 @@ export default function AppDetailsPage() {
               Path
             </span>
             <div className="flex items-center gap-1">
+              <Tooltip>
+                <TooltipTrigger
+                  render={
                     <Button
                       variant="ghost"
                       size="icon"
@@ -364,10 +372,13 @@ export default function AppDetailsPage() {
                       onClick={() => {
                         ipc.system.showItemInFolder(currentAppPath);
                       }}
-                title="Show in folder"
+                    />
+                  }
                 >
                   <Folder className="h-3.5 w-3.5" />
-              </Button>
+                </TooltipTrigger>
+                <TooltipContent>Show in folder</TooltipContent>
+              </Tooltip>
               <span className="text-sm break-all">{currentAppPath}</span>
             </div>
           </div>