fix: use default tooltip props for click support on mobile

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>

Author: M-DEV-1

src/custom/CustomTooltip/customTooltip.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React from 'react';
 import { Tooltip, TooltipProps } from '../../base';
 import { WHITE } from '../../theme';
 import { RenderMarkdownTooltip } from '../Markdown';
@@ -27,27 +27,10 @@ function CustomTooltip({
   componentsProps = {},
   ...props
 }: CustomTooltipProps): JSX.Element {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const isTouchDevice = useMemo(() => {
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-  }, []);
-
-  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setIsOpen(true);
-  };
-
-  const handleTouchEnd = useMemo(
-    () =>
-      _.debounce(() => {
-        setIsOpen(false);
-      }, 1500),
-    [setIsOpen]
-  );
-
   return (
     <Tooltip
+      enterTouchDelay={0}
+      leaveTouchDelay={2000}
       componentsProps={_.merge(
         {
           tooltip: {
@@ -76,16 +59,13 @@ function CustomTooltip({
         },
         componentsProps
       )}
-      open={isTouchDevice ? isOpen : undefined}
       title={typeof title === 'string' ? <RenderMarkdownTooltip content={title} /> : title}
       placement={placement}
       arrow
       onClick={onClick}
       {...props}
     >
-      <div onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
-        {children}
-      </div>
+      {children}
     </Tooltip>
   );
 }