From 1cd49c75b6b9cf4cfebcd2ca7bdcda914bf5b8ac Mon Sep 17 00:00:00 2001
From: ikramBagban <107988060+IkramBagban@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:26:48 +0530
Subject: [PATCH 1/2] feat: add tooltip on hover of video title in search box
 (#1550)

---
 src/components/search/SearchResults.tsx   |  2 +-
 src/components/search/VideoSearchCard.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index fbef8c12d..851721f00 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -51,7 +51,7 @@ export function SearchResults({
     <div
       className={`absolute ${
         isMobile ? 'top-full' : 'top-12'
-      } z-30 max-h-[40vh] w-full overflow-y-auto rounded-lg border-2 bg-background p-2 shadow-lg`}
+      } z-30 max-h-[40vh] w-full rounded-lg border-2 bg-background p-2 shadow-lg`}
     >
       {renderSearchResults()}
     </div>
diff --git a/src/components/search/VideoSearchCard.tsx b/src/components/search/VideoSearchCard.tsx
index c95c962b3..6ea5eed81 100644
--- a/src/components/search/VideoSearchCard.tsx
+++ b/src/components/search/VideoSearchCard.tsx
@@ -28,13 +28,19 @@ const VideoSearchCard: React.FC<VideoSearchCardProps> = ({
     return (
       <Link
         href={videoUrl}
-        className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 hover:bg-blue-600/10 hover:text-blue-600"
+        className="group relative flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 hover:bg-blue-600/10 hover:text-blue-600"
         onClick={handleClick}
       >
         <Play className="size-4" />
-        <span className="w-4/5 truncate font-medium capitalize">
+        <span
+          className="w-4/5 truncate font-medium capitalize"
+          data-tooltip={video.title}
+        >
           {video.title}
         </span>
+        <div className="absolute bottom-full left-1/2 mb-2 -translate-x-1/2 transform whitespace-nowrap rounded bg-primary px-2 py-1 text-xs text-background opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+          {video.title}
+        </div>
       </Link>
     );
   }

From 5d2b86633589a6f11b21de1a91f6a6bfccf769ad Mon Sep 17 00:00:00 2001
From: ikramBagban <107988060+IkramBagban@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:37:47 +0530
Subject: [PATCH 2/2] refactor: add shadcn tooltip

---
 package.json                              |  2 +-
 pnpm-lock.yaml                            |  2 +-
 src/components/search/VideoSearchCard.tsx | 27 +++++++++++++++--------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 0ac21ecd6..466ac97a5 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@tabler/icons-react": "^3.14.0",
     "@types/bcrypt": "^5.0.2",
     "@types/jsonwebtoken": "^9.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a39d1ca3..fdab6da43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,7 +63,7 @@ importers:
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
-        specifier: ^1.0.7
+        specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tabler/icons-react':
         specifier: ^3.14.0
diff --git a/src/components/search/VideoSearchCard.tsx b/src/components/search/VideoSearchCard.tsx
index 6ea5eed81..e8ab16302 100644
--- a/src/components/search/VideoSearchCard.tsx
+++ b/src/components/search/VideoSearchCard.tsx
@@ -2,6 +2,12 @@ import { TSearchedVideos } from '@/app/api/search/route';
 import { Play } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip';
 
 interface VideoSearchCardProps {
   video: TSearchedVideos;
@@ -32,15 +38,18 @@ const VideoSearchCard: React.FC<VideoSearchCardProps> = ({
         onClick={handleClick}
       >
         <Play className="size-4" />
-        <span
-          className="w-4/5 truncate font-medium capitalize"
-          data-tooltip={video.title}
-        >
-          {video.title}
-        </span>
-        <div className="absolute bottom-full left-1/2 mb-2 -translate-x-1/2 transform whitespace-nowrap rounded bg-primary px-2 py-1 text-xs text-background opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-          {video.title}
-        </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="w-4/5 truncate font-medium capitalize">
+                {video.title}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{video.title}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </Link>
     );
   }