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] 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>
     );
   }