fix(datatrak): RN-1450: Fix mobile tooltips (#5971)

* Update Tooltip.tsx * set delay on BaseTooltip --------- Co-authored-by: Andrew <[email protected]>
beyondessential · Nov 7, 2024 · 04ed541 · 04ed541
1 parent f85052f
commit 04ed541
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/packages/datatrak-web/src/features/Survey/Components/CopySurveyUrlButton.tsx b/packages/datatrak-web/src/features/Survey/Components/CopySurveyUrlButton.tsx
@@ -54,6 +54,7 @@ export const CopySurveyUrlButton = () => {
       }
       arrow
       enterDelay={500}
+      enterTouchDelay={500}
     >
       <Button aria-label="copy url to clipboard" onClick={copyPageUrl}>
         <CopyIcon />

diff --git a/packages/ui-components/src/components/Inputs/InputLabel.tsx b/packages/ui-components/src/components/Inputs/InputLabel.tsx
@@ -27,10 +27,13 @@ const TooltipWrapper = styled.span`
     height: 100%;
     width: 100%;
   }
+
   &:hover,
   &:focus {
-    svg {
-      fill: ${props => props.theme.palette.primary.main};
+    ${({ theme }) => theme.breakpoints.up('md')} {
+      svg {
+        fill: ${props => props.theme.palette.primary.main};
+      }
     }
   }
 `;

diff --git a/packages/ui-components/src/components/Tooltip.tsx b/packages/ui-components/src/components/Tooltip.tsx
@@ -14,14 +14,14 @@ const TOOLTIP_COLOR = '#002d47';
 
 // For placement options @see https://material-ui.com/api/tooltip
 export const Tooltip = styled(
-  ({ className, placement = 'top', enterDelay, ...props }: TooltipProps) => (
+  ({ className, placement = 'top', enterDelay, enterTouchDelay = 10, ...props }: TooltipProps) => (
     <MuiTooltip
       {...props}
       classes={{ popper: className }}
       placement={placement}
       enterDelay={enterDelay}
       enterNextDelay={enterDelay}
-      enterTouchDelay={enterDelay}
+      enterTouchDelay={enterTouchDelay}
       arrow
     />
   ),

diff --git a/packages/ui-components/src/components/TooltipIconButton.tsx b/packages/ui-components/src/components/TooltipIconButton.tsx
@@ -23,8 +23,10 @@ const TooltipWrapper = styled.span`
   }
   &:hover,
   &:focus {
-    svg {
-      fill: ${props => props.theme.palette.primary.main};
+    ${({ theme }) => theme.breakpoints.up('md')} {
+      svg {
+        fill: ${props => props.theme.palette.primary.main};
+      }
     }
   }
 `;
@@ -48,7 +50,7 @@ interface TooltipIconButtonProps {
 
 export const TooltipIconButton = ({ tooltip, Icon = InfoOutlined }: TooltipIconButtonProps) => {
   return (
-    <Tooltip title={tooltip} placement="top">
+    <Tooltip title={tooltip} placement="top" enterTouchDelay={500}>
       <TooltipWrapper tabIndex={0} className="tooltip-icon">
         <Icon />
       </TooltipWrapper>