feat: add TooltipWrapper component with theme support

Author: mateuscamaccho

package-lock.json

@@ -63,6 +63,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
     "axios": "^1.7.2",

package.json

@@ -0,0 +1,33 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { ReactNode } from "react";
+
+interface TooltipWrapperProps {
+  content: string; // o texto que vai aparecer no tooltip
+  children: ReactNode; // o trigger (qualquer elemento)
+  side?: "top" | "right" | "bottom" | "left"; // posição opcional
+}
+
+export function TooltipWrapper({ content, children, side = "top" }: TooltipWrapperProps) {
+  return (
+    <Tooltip.Provider delayDuration={200}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          {children}
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            side={side}
+             className="
+              rounded px-3 py-1.5 text-sm z-50 border shadow-lg
+            bg-gray-100 text-gray-900 border-gray-300
+            dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700
+            "
+          >
+            {content}
+            <Tooltip.Arrow className="fill-gray-100 dark:fill-gray-800" width={18} height={9} />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}

src/components/ui/tooltip.tsx

@@ -19,6 +19,7 @@ import { useManageInstance } from "@/lib/queries/instance/manageInstance";
 import { Instance } from "@/types/evolution.types";
 
 import { NewInstance } from "./NewInstance";
+import { TooltipWrapper } from "@/components/ui/tooltip";
 
 function Dashboard() {
   const { t } = useTranslation();
@@ -119,10 +120,15 @@ function Dashboard() {
             <Card key={instance.id}>
               <CardHeader>
                 <Link to={`/manager/instance/${instance.id}/dashboard`} className="flex w-full flex-row items-center justify-between gap-4">
-                  <h3 className="text-wrap font-semibold">{instance.name}</h3>
-                  <Button variant="ghost" size="icon">
-                    <Cog className="card-icon" size="20" />
-                  </Button>
+                  <TooltipWrapper content={instance.name} side="top">
+                    <h3 className="text-wrap font-semibold truncate">{instance.name}</h3>
+                  </TooltipWrapper>
+
+                  <TooltipWrapper content={t("dashboard.settings")} side="top">
+                    <Button variant="ghost" size="icon">
+                      <Cog className="card-icon" size="20" />
+                    </Button>
+                  </TooltipWrapper>
                 </Link>
               </CardHeader>
               <CardContent className="flex-1 space-y-6">

src/pages/Dashboard/index.tsx

@@ -2,7 +2,8 @@
   "dashboard": {
     "title": "Instances",
     "search": "Search",
-    "status": "Status"
+    "status": "Status",
+    "settings": "Settings"
   },
   "button": {
     "delete": "Delete",

src/translate/languages/en-US.json

@@ -2,7 +2,8 @@
   "dashboard": {
     "title": "Instancias",
     "search": "Buscar",
-    "status": "Estado"
+    "status": "Estado",
+    "settings": "Configuraciones"
   },
   "button": {
     "delete": "Eliminar",

src/translate/languages/es-ES.json

@@ -2,7 +2,8 @@
   "dashboard": {
     "title": "Instances",
     "search": "Rechercher",
-    "status": "Statut"
+    "status": "Statut",
+    "settings": "Paramètres"
   },
   "button": {
     "delete": "Supprimer",

src/translate/languages/fr-FR.json

@@ -2,7 +2,8 @@
   "dashboard": {
     "title": "Instâncias",
     "search": "Pesquisar",
-    "status": "Status"
+    "status": "Status",
+    "settings": "Configurações"
   },
   "button": {
     "delete": "Excluir",