close tooltip if the user scrolls more than 80px

Author: pettinarip

src/components/Tooltip/index.tsx

@@ -9,6 +9,8 @@ import {
   useDisclosure,
 } from "@chakra-ui/react"
 
+import { isMobile } from "@/lib/utils/isMobile"
+
 export interface IProps extends PopoverProps {
   content: ReactNode
   children?: ReactNode
@@ -21,15 +23,21 @@ const Tooltip: React.FC<IProps> = ({ content, children, ...rest }) => {
   // This is useful for mobile devices where the popover is open by clicking the
   // trigger, not hovering.
   useEffect(() => {
+    let originalPosition = 0
+
     const handleScroll = () => {
-      if (isOpen) {
+      const delta = window.scrollY - originalPosition
+
+      // Close the popover if the user scrolls more than 80px
+      if (isOpen && Math.abs(delta) > 80) {
         onClose()
       }
     }
 
     // Add event listener when the popover is open
     if (isOpen) {
       window.addEventListener("scroll", handleScroll)
+      originalPosition = window.scrollY
     }
 
     return () => {
@@ -43,7 +51,7 @@ const Tooltip: React.FC<IProps> = ({ content, children, ...rest }) => {
       onOpen={onOpen}
       onClose={onClose}
       placement="top"
-      trigger="hover"
+      trigger={isMobile() ? "click" : "hover"}
       gutter={8}
       {...rest}
     >