feat: add tooltip on text

libs/shared/lib/components/CardToolTipVis/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Icon } from '@graphpolaris/shared/lib/components/icon';
 import { AbcOutlined, Settings } from '@mui/icons-material';
 import styles from './cardtooltipvis.module.scss';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
 
 export type CardToolTipVisProps = {
   type: string;
@@ -14,28 +15,39 @@ export type CardToolTipVisProps = {
 
 export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ type, name, data, colorHeader }) => {
   return (
-    <div className="border-2 border-sec-200 bg-white">
+    <div className="border-2 border-sec-200 bg-white ">
       <div className="flex m-0 items-center border-b-2 border-sec-200">
-        <div className="h-9 w-4" style={{ backgroundColor: 'hsl(29 96 60)' }}></div>
+        <div className="h-9 w-4" style={{ backgroundColor: 'hsl(29 96% 60%)' }}></div>
         <span className="text-xl ml-2">{name}</span>
       </div>
-      <div className="px-4 py-2">
-        {data &&
-          Object.entries(data).map(([k, v]) => (
-            <div key={k} className="flex flex-row gap-3 items-center">
-              <span className="font-semibold">{k}</span>
-              <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
-                {type === 'schema' ? (
-                  <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} />
-                ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
-                  <span>{v.toString()}</span>
-                ) : (
-                  <div className={`ml-auto h-4 w-12 ${styles['diagonal-lines']}`}></div>
-                )}
-              </span>
-            </div>
-          ))}
-      </div>
+      <TooltipProvider delayDuration={300}>
+        <div className="px-4 py-2 ">
+          {data &&
+            Object.entries(data).map(([k, v]) => (
+              <Tooltip key={k}>
+                <TooltipTrigger asChild>
+                  <div className="flex flex-row gap-3 items-center">
+                    <span className="font-semibold">{k}</span>
+                    <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
+                      {type === 'schema' ? (
+                        <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} />
+                      ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
+                        <span>{v.toString()}</span>
+                      ) : (
+                        <div className={`ml-auto h-4 w-12 ${styles['diagonal-lines']}`}></div>
+                      )}
+                    </span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div>
+                    <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? v : 'noData'}</span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ))}
+        </div>
+      </TooltipProvider>
     </div>
   );
 };