fix tooltip on mobile version

TogetherCrew · Dec 6, 2023 · f616470 · f616470
1 parent 0e7d527
commit f616470
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 21 deletions.
diff --git a/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx b/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx
@@ -37,7 +37,7 @@
  * <TcConnectedPlatformsItem platform={platform} />
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import TcText from '../../shared/TcText';
 import clsx from 'clsx';
 import TcAvatar from '../../shared/TcAvatar';
@@ -49,13 +49,22 @@ import TcIntegrationIcon from './TcIntegrationIcon';
 import { capitalizeFirstChar, truncateCenter } from '../../../helpers/helper';
 import { IntegrationPlatform } from '../../../utils/enums';
 import { BsThreeDots } from 'react-icons/bs';
-import { Tooltip } from '@mui/material';
+import { ClickAwayListener, Tooltip } from '@mui/material';
 
 interface TcConnectedPlatformsItemProps {
   platform: IPlatformProps;
 }
 
 function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setOpen(true);
+  };
   return (
     <TcIntegrationCard>
       <>
@@ -75,9 +84,16 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
                 variant="body1"
                 className="text-semibold"
               />
-              <Tooltip title={'Connected'} arrow placement="right">
-                <div className={'h-3 w-3 rounded-full bg-success'} />
-              </Tooltip>
+              <ClickAwayListener onClickAway={handleTooltipClose}>
+                <Tooltip
+                  title={'Connected'}
+                  arrow
+                  placement="right"
+                  enterTouchDelay={0}
+                >
+                  <div className={'h-3 w-3 rounded-full bg-success'} />
+                </Tooltip>
+              </ClickAwayListener>
             </div>
             <div className="flex justify-center">
               <TcIntegrationIcon

diff --git a/src/components/pages/statistics/StatisticalData.tsx b/src/components/pages/statistics/StatisticalData.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@mui/material';
+import { ClickAwayListener, Tooltip } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { RxArrowTopRight, RxArrowBottomRight } from 'react-icons/rx';
@@ -25,6 +25,7 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
   handleSelectedOption,
 }) => {
   const [activeState, setActiveState] = useState<string | string[]>();
+  const [open, setOpen] = useState<boolean>(false);
 
   useEffect(() => {
     const queries = router.query;
@@ -55,6 +56,14 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
     }
   }, [router.query]);
 
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setOpen(true);
+  };
+
   return (
     <>
       <div
@@ -114,14 +123,21 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
               <span className="text-base flex items-center">
                 {stat.label}
                 {stat.hasTooltip && (
-                  <Tooltip title={stat.tooltipText} arrow placement="bottom">
-                    <span>
-                      <AiOutlineExclamationCircle
-                        size={'18px'}
-                        className="mx-auto ml-1"
-                      />
-                    </span>
-                  </Tooltip>
+                  <ClickAwayListener onClickAway={handleTooltipClose}>
+                    <Tooltip
+                      title={stat.tooltipText}
+                      arrow
+                      placement="bottom"
+                      enterTouchDelay={0}
+                    >
+                      <span onClick={handleTooltipOpen}>
+                        <AiOutlineExclamationCircle
+                          size={'18px'}
+                          className="mx-auto ml-1"
+                        />
+                      </span>
+                    </Tooltip>
+                  </ClickAwayListener>
                 )}
               </span>
             </div>

diff --git a/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx b/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
@@ -2,6 +2,7 @@ import {
   Avatar,
   Button,
   Checkbox,
+  ClickAwayListener,
   FormControlLabel,
   List,
   ListItem,
@@ -78,6 +79,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
   >(activityCompositionOptions.map((option) => option.value));
   const [selectAllActivityOptions, setSelectAllActivityOptions] =
     useState(true);
+  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
 
   const handleOpenActivityPopup = (
     event: React.MouseEvent<HTMLButtonElement>
@@ -230,6 +232,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
     }
   }, [router.query]);
 
+  const handleTooltipClose = () => {
+    setTooltipOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setTooltipOpen(true);
+  };
+
   return (
     <>
       <Table className="border-separate border-spacing-y-2">
@@ -462,13 +472,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                 {row.ngu}
                               </span>
                               {row[column.id].length > 10 ? (
-                                <Tooltip title={row[column.id]} placement="top">
-                                  <span className="text-gray-subtitle text-base cursor-pointer">
-                                    {`${row[column.id].slice(0, 3)}...${row[
-                                      column.id
-                                    ].slice(-4)}`}
-                                  </span>
-                                </Tooltip>
+                                <ClickAwayListener
+                                  onClickAway={handleTooltipClose}
+                                >
+                                  <Tooltip
+                                    title={row[column.id]}
+                                    placement="top"
+                                    enterTouchDelay={0}
+                                  >
+                                    <span className="text-gray-subtitle text-base cursor-pointer">
+                                      {`${row[column.id].slice(0, 3)}...${row[
+                                        column.id
+                                      ].slice(-4)}`}
+                                    </span>
+                                  </Tooltip>
+                                </ClickAwayListener>
                               ) : (
                                 <span className="text-gray-subtitle text-base">
                                   {row[column.id]}