Added tooltip to info

src/frontend/src/components/shadTooltipComponent/index.tsx

@@ -11,7 +11,7 @@ export default function ShadTooltip({
   delayDuration = 500,
 }: ShadToolTipType): JSX.Element {
   return (
-    <Tooltip delayDuration={delayDuration}>
+    <Tooltip defaultOpen={!children} delayDuration={delayDuration}>
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent
         className={cn(styleClasses, "max-w-96")}

src/frontend/src/components/tableTooltipRender/index.tsx

@@ -0,0 +1,9 @@
+import { CustomTooltipProps } from "ag-grid-react";
+
+export default function TableTooltipRender({ value }: CustomTooltipProps) {
+  return (
+    <div className="z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1">
+      {value}
+    </div>
+  );
+}

src/frontend/src/modals/editNodeModal/index.tsx

@@ -14,7 +14,8 @@ import TableComponent from "../../components/tableComponent";
 import TableAutoCellRender from "../../components/tableAutoCellRender";
 import { TemplateVariableType } from "../../types/api";
 import TableNodeCellRender from "../../components/tableNodeCellRender";
-import { ValueGetterParams } from "ag-grid-community";
+import { ColDef, ValueGetterParams } from "ag-grid-community";
+import TableTooltipRender from "../../components/tableTooltipRender";
 
 const EditNodeModal = forwardRef(
   (
@@ -79,7 +80,7 @@ const EditNodeModal = forwardRef(
         };
       });
 
-    const columnDefs = [
+    const columnDefs: ColDef[] = [
       {
         headerName: "Name",
         field: "display_name",
@@ -98,6 +99,8 @@ const EditNodeModal = forwardRef(
       {
         headerName: "Description",
         field: "info",
+        tooltipField: "info",
+        tooltipComponent: TableTooltipRender,
         cellRenderer: TableAutoCellRender,
         autoHeight: true,
         flex: 2,
@@ -180,7 +183,12 @@ const EditNodeModal = forwardRef(
             {nodeLength > 0 && (
               <div className="edit-node-modal-table">
                 <div className="h-96">
-                  <TableComponent columnDefs={columnDefs} rowData={rowData} />
+                  <TableComponent
+                    tooltipShowMode="whenTruncated"
+                    tooltipShowDelay={0.5}
+                    columnDefs={columnDefs}
+                    rowData={rowData}
+                  />
                 </div>
               </div>
             )}