Fix tooltip tap event

pshenmic · Oct 6, 2024 · 4bec2f4 · 4bec2f4
1 parent ce4a200
commit 4bec2f4
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/packages/frontend/src/components/ui/Tooltips/Tooltip.js b/packages/frontend/src/components/ui/Tooltips/Tooltip.js
@@ -1,8 +1,24 @@
-import { Tooltip as ChakraTooltip } from '@chakra-ui/react'
+import { Tooltip as ChakraTooltip, useOutsideClick } from '@chakra-ui/react'
+import { useState, useRef, cloneElement } from 'react'
 import './Tooltip.scss'
 
-export default function Tooltip ({ title = '', content = '', children, ...props }) {
+export default function Tooltip ({ title = '', content = '', children, className, ...props }) {
   const extraClass = title && content ? 'Tooltip--Extended' : ''
+  const [isOpen, setIsOpen] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const ref = useRef()
+
+  useOutsideClick({
+    ref: ref,
+    handler: () => setIsOpen(false)
+  })
+
+  const element = cloneElement(children, {
+    ref: ref,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onClick: () => setIsOpen(prev => !prev)
+  })
 
   return (
     <ChakraTooltip
@@ -20,9 +36,11 @@ export default function Tooltip ({ title = '', content = '', children, ...props
       borderLeft={'none'}
       borderRight={'none'}
       padding={'18px 24px'}
+      isOpen={isOpen || isHovered}
+      onClose={() => setIsOpen(false)}
       {...props}
     >
-      {children}
+      {element}
     </ChakraTooltip>
   )
 }