tooltip works!!

(sorry i'm in the wrong branch)

client/src/components/layout/Canvas/components/Tooltip.jsx

@@ -0,0 +1,45 @@
+import { useState, useRef } from "react";
+import { chakra, useSlotRecipe } from "@chakra-ui/react";
+
+
+export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
+  const [isVisible, setIsVisible] = useState(!sidebarIsOpen);
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
+  const timeoutId = useRef(null);
+
+  return (
+    <chakra.div
+      width={sidebarIsOpen ? "194px" : "55px"}
+      transition="width 0.4s ease"
+      onMouseEnter={() => { timeoutId.current = setTimeout(() => setIsVisible(true), 1000); }}
+      onMouseLeave={() => {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+        }
+        setIsVisible(false);
+      }} 
+    >
+      {children}
+      {isVisible && !sidebarIsOpen && (
+        <>
+          <chakra.div 
+            fontSize="xs"
+            position="absolute"
+            bg="gray.700"
+            color="white"
+            left="65px"
+            px={2}
+            py={1}
+            borderRadius="md"
+            whiteSpace="nowrap"
+            zIndex={10}
+          >
+            {content}
+          </chakra.div>
+        </>
+      )}
+    </chakra.div>
+  )
+}

client/src/components/layout/Canvas/components/Widget.jsx

@@ -12,13 +12,13 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }
         {isDelete ? (
           <>
             <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
-              <Text className="widget-handle" w="100%">{title}</Text>
+              <Text className="widget-handle" w="100%" fontWeight="bold">{title}</Text>
               <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
             </Flex>
           </>
         ):(
           <>
-            <Text className="widget-handle" >{title}</Text>
+            <Text className="widget-handle" fontWeight="bold">{title}</Text>
           </>
         )}
       </chakra.div>

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -81,7 +81,7 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
 
   return (
     /* HEADER */
-    <Tabs.Root lazyMount defaultValue="my dashboard">
+    <Tabs.Root lazyMount defaultValue="my dashboard" size="lg">
       <Flex 
         as="header"
 				position="sticky"
@@ -89,24 +89,24 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
         zIndex="dropdown" // zIndex: 1100
 				bg="base200"
 				px={6}
-				py={3}
+				pt={3}
 				align="center"
 				justify="space-between"
       >
         <Tabs.List>
-          <Tabs.Trigger value="my dashboard">
+          <Tabs.Trigger value="my dashboard" >
             My Dashboard
           </Tabs.Trigger>
-          <Tabs.Trigger value="gas">
+          <Tabs.Trigger value="gas" >
             Gas
           </Tabs.Trigger>
-          <Tabs.Trigger value="seismic">
+          <Tabs.Trigger value="seismic" >
             Seismic
           </Tabs.Trigger>
-          <Tabs.Trigger value="remote sensing">
+          <Tabs.Trigger value="remote sensing" >
             Remote Sensing
           </Tabs.Trigger>
-                  <Tabs.Trigger value="daily activity">
+          <Tabs.Trigger value="daily activity" >
             Daily Activity
           </Tabs.Trigger>
         </Tabs.List>