Replace custom CSS tooltips with shadcn Tooltip component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/settings/page.tsx

@@ -31,6 +31,11 @@ import {
 } from "@/components/ui/collapsible";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { signOut, useSession } from "@/lib/auth/client";
 
 const sectionVariants = {
@@ -206,18 +211,24 @@ function WebhookCard({
                     value={webhookUrl}
                     className="font-mono text-[10px] text-muted-foreground"
                   />
-                  <Button
+                  <Tooltip>
-                    variant="outline"
+                    <TooltipTrigger
-                    size="icon-lg"
+                      render={
-                    onClick={handleCopy}
+                        <Button
-                    title="Copy URL"
+                          variant="outline"
-                  >
+                          size="icon-lg"
-                    {copied ? (
+                          onClick={handleCopy}
-                      <IconCheck size={14} className="text-green-400" />
+                        />
-                    ) : (
+                      }
-                      <IconCopy size={14} />
+                    >
-                    )}
+                      {copied ? (
-                  </Button>
+                        <IconCheck size={14} className="text-green-400" />
+                      ) : (
+                        <IconCopy size={14} />
+                      )}
+                    </TooltipTrigger>
+                    <TooltipContent>Copy URL</TooltipContent>
+                  </Tooltip>
                 </div>
               </div>
 

app/(pages)/titles/[id]/page.tsx

@@ -17,6 +17,11 @@ import { StatusButton } from "@/components/status-button";
 import { TitleCard } from "@/components/title-card";
 import { TmdbLogo } from "@/components/tmdb-logo";
 import { Progress } from "@/components/ui/progress";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useRegisterShortcut } from "@/hooks/use-register-shortcut";
 
 interface Episode {
@@ -855,8 +860,8 @@ function ProviderBadge({
   logoPath: string | null;
 }) {
   return (
-    <div className="group relative">
+    <Tooltip>
-      <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg border border-border/30 bg-card transition-transform hover:scale-105">
+      <TooltipTrigger className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg border border-border/30 bg-card transition-transform hover:scale-105">
         {logoPath ? (
           <Image
             src={logoPath}
@@ -870,10 +875,10 @@ function ProviderBadge({
             {name.slice(0, 2)}
           </span>
         )}
-      </div>
+      </TooltipTrigger>
-      <div className="pointer-events-none absolute -top-8 left-1/2 z-20 -translate-x-1/2 whitespace-nowrap rounded-md bg-popover px-2 py-1 text-[10px] font-medium text-popover-foreground opacity-0 shadow-md transition-opacity group-hover:opacity-100">
+      <TooltipContent className="bg-popover px-2 py-1 text-[10px] font-medium text-popover-foreground shadow-md [&>:last-child]:bg-popover [&>:last-child]:fill-popover">
         {name}
-      </div>
+      </TooltipContent>
-    </div>
+    </Tooltip>
   );
 }