tooltip works!!

(sorry i'm in the wrong branch)

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -1,6 +1,7 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
 import { ColorModeButton } from "@/components/ui/color-mode";
-import { Tooltip } from "@/components/ui/tooltip";
+// import { Tooltip } from "@/components/ui/tooltip";
+import Tooltip from "../Canvas/components/Tooltip.jsx";
 import { FaVolcano } from "react-icons/fa6";
 import { FaHome } from "react-icons/fa";
 import { FaGlobeAmericas } from "react-icons/fa";
@@ -12,6 +13,8 @@ import { useState } from "react";
 export default function Sidebar({ onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
 
     // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
@@ -21,9 +24,6 @@ export default function Sidebar({ onChangeView }) {
     {icon: FaVolcano, name: "Volcano", view: "volcano"},
     {icon: HiUsers, name: "Admin", view: "admin"}
   ];
-  
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
 
   const toggleSidebar = () => {
     if (isOpen) setIsOpen(false);
@@ -35,6 +35,7 @@ export default function Sidebar({ onChangeView }) {
       css={styles.root}
       width={isOpen ? "210px" : "71px"}
       transition="width 0.4s ease"
+      position="relative"
     >
       <IconButton
         aria-label="Toggle Sidebar"
@@ -48,20 +49,22 @@ export default function Sidebar({ onChangeView }) {
 
       {buttons.map((button, idx) => {
         const Icon = button.icon;
-        const buttonElement = (
-          <Button 
-                  // key={idx} 
-                  css={styles.buttons} 
-                  onClick={() => {
-                    setActiveButton(idx);
-                    onChangeView(button.view); // Trigger state change in Dashboard
-                  }} 
-                  bg={activeButton === idx ? "primary":undefined} 
-                  color={activeButton === idx ? "#FFFFFF":undefined} 
-                  justifyContent="flex-start"
-          >           
-            <Icon />
-              <span style={{
+        return (
+          <Tooltip tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
+            <Button 
+              key={idx} 
+              css={styles.buttons} 
+              onClick={() => {
+                setActiveButton(idx);
+                onChangeView(button.view); // Trigger state change in Dashboard
+              }} 
+              bg={activeButton === idx ? "primary":undefined} 
+              color={activeButton === idx ? "#FFFFFF":undefined} 
+              justifyContent="flex-start"
+            >           
+              <Icon />
+              <span
+                style={{
                 opacity: isOpen ? 1 : 0,
                 transition: "opacity 0.4s ease",
                 overflow: "hidden",
@@ -72,17 +75,9 @@ export default function Sidebar({ onChangeView }) {
               >
                 {button.name}
               </span>
-          </Button>
-        );
-        // console.log("buttonElement is:", buttonElement)
-        console.log("Returning:", !isOpen ? "Tooltip" : "Button", buttonElement);
-        return !isOpen ? (
-          <Tooltip key={ idx } content={ button.name } placement="right" hasArrow>
-            { buttonElement }
+            </Button>
           </Tooltip>
-        ) : (
-          buttonElement 
-        );
+        )
       })}
       <ColorModeButton position="absolute" bottom="2"/>
     </Box>