Enable touch on tooltip

HussainTaj-W · Jun 5, 2023 · 74591d7 · 74591d7
1 parent 789bc8e
commit 74591d7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/components/Skill/index.tsx b/src/components/Skill/index.tsx
@@ -1,5 +1,6 @@
-import { Box, Text, Image, Progress, Tag, Tooltip } from "@chakra-ui/react";
+import { Box, Text, Image, Progress, Tag } from "@chakra-ui/react";
 
+import TooltipTouch from "@/components/TooltipTouch";
 import ISkill from "@/types/skill";
 
 import styles from "./styles.module.scss";
@@ -16,7 +17,7 @@ function Skill({ data, type = "full" }: Props) {
   const isFull = type === "full";
 
   return (
-    <Tooltip
+    <TooltipTouch
       label={data.name}
       aria-label="A tooltip"
       isDisabled={!isIcon}
@@ -71,7 +72,7 @@ function Skill({ data, type = "full" }: Props) {
           />
         ) : null}
       </Box>
-    </Tooltip>
+    </TooltipTouch>
   );
 }
 

diff --git a/src/components/TooltipTouch/index.tsx b/src/components/TooltipTouch/index.tsx
@@ -0,0 +1,29 @@
+import { ReactNode, useState } from "react";
+
+import { Box, Tooltip } from "@chakra-ui/react";
+
+const TooltipTouch = ({
+  children,
+  ...restToolTipProps
+}: {
+  children: ReactNode;
+  [key: string]: any;
+}) => {
+  const [isLabelOpen, setIsLabelOpen] = useState(false);
+
+  return (
+    <Tooltip isOpen={isLabelOpen} {...restToolTipProps}>
+      <Box
+        onMouseEnter={() =>
+          setIsLabelOpen(true && !restToolTipProps.isDisabled)
+        }
+        onMouseLeave={() => setIsLabelOpen(false)}
+        onClick={() => setIsLabelOpen(true && !restToolTipProps.isDisabled)}
+      >
+        {children}
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default TooltipTouch;