Refactor made changes to file structures

2026-06-10 14:00:37 -07:00
parent 305ee4e757
commit baaf162df9
46 changed files with 42 additions and 177 deletions
@@ -0,0 +1,48 @@
+import { useState, useRef } from "react";
+import { chakra } from "@chakra-ui/react";
+
+
+export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutId = useRef(null);
+
+  return (
+    <chakra.div
+      width={sidebarIsOpen ? "194px" : "55px"}
+      transition="width 0.4s ease"
+      onMouseEnter={() => { timeoutId.current = setTimeout(() => setIsVisible(true), 1100); }}
+      onMouseLeave={() => {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+        }
+        setIsVisible(false);
+      }}
+      onClick={() => {
+        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="overlay" // zIndex = 1300
+        >
+          {content}
+        </chakra.div>
+      )}
+    </chakra.div>
+  )
+}
@@ -1,35 +0,0 @@
-import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'
-import * as React from 'react'
-
-export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
-  const {
-    showArrow,
-    children,
-    disabled,
-    portalled = true,
-    content,
-    contentProps,
-    portalRef,
-    ...rest
-  } = props
-
-  if (disabled) return children
-
-  return (
-    <ChakraTooltip.Root {...rest}>
-      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
-      <Portal disabled={!portalled} container={portalRef}>
-        <ChakraTooltip.Positioner>
-          <ChakraTooltip.Content ref={ref} {...contentProps}>
-            {showArrow && (
-              <ChakraTooltip.Arrow>
-                <ChakraTooltip.ArrowTip />
-              </ChakraTooltip.Arrow>
-            )}
-            {content}
-          </ChakraTooltip.Content>
-        </ChakraTooltip.Positioner>
-      </Portal>
-    </ChakraTooltip.Root>
-  )
-})