feat: add tooltip on hover of video title in search box (code100x#1550)

IkramBagban · Nov 7, 2024 · 1cd49c7 · 1cd49c7
1 parent 7b33e78
commit 1cd49c7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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>
     );
   }