Add name tooltip

dashboard/src/components/dashboard/ProductGrid.jsx

@@ -23,6 +23,12 @@ import { Button } from "@/components/ui/button";
 import { TIME_RANGES } from "@/lib/constants";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 const ProductGrid = ({
   timeRange = "today",
@@ -289,6 +295,9 @@ const ProductGrid = ({
                         </td>
                         <td className="p-1 align-middle min-w-[200px]">
                           <div className="flex flex-col min-w-0">
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
                                   <a
                                     href={`https://backend.acherryontop.com/product/${product.id}`}
                                     target="_blank"
@@ -297,6 +306,12 @@ const ProductGrid = ({
                                   >
                                     {product.name}
                                   </a>
+                                </TooltipTrigger>
+                                <TooltipContent side="top" className="max-w-[300px]">
+                                  <p>{product.name}</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
                           </div>
                         </td>
                         <td className="p-1 align-middle text-center text-sm font-medium">