From 1cf33bf0842bfa021ede5c3cc96031618a23de84 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sat, 21 Dec 2024 19:07:15 -0500
Subject: [PATCH] Add name tooltip

---
 .../src/components/dashboard/ProductGrid.jsx  | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/components/dashboard/ProductGrid.jsx b/dashboard/src/components/dashboard/ProductGrid.jsx
index 7e3ca32..f4bb232 100644
--- a/dashboard/src/components/dashboard/ProductGrid.jsx
+++ b/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,14 +295,23 @@ const ProductGrid = ({
                         </td>
                         <td className="p-1 align-middle min-w-[200px]">
                           <div className="flex flex-col min-w-0">
-                            <a
-                              href={`https://backend.acherryontop.com/product/${product.id}`}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="text-sm hover:underline line-clamp-2 text-gray-900 dark:text-gray-100"
-                            >
-                              {product.name}
-                            </a>
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <a
+                                    href={`https://backend.acherryontop.com/product/${product.id}`}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-sm hover:underline line-clamp-2 text-gray-900 dark:text-gray-100"
+                                  >
+                                    {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">