Merge pull request #603 from blockscout/mobile-tooltip

mobile tooltip fixes

ui/address/contract/ContractMethodsAccordion.tsx

-import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, Icon, Link, Tooltip } from '@chakra-ui/react';
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, Link } from '@chakra-ui/react';
 import _range from 'lodash/range';
 import React from 'react';
 
 import type { SmartContractMethod } from 'types/api/contract';
 
-import infoIcon from 'icons/info.svg';
+import Hint from 'ui/shared/Hint';
 
 interface Props<T extends SmartContractMethod> {
   data: Array<T>;
@@ -46,32 +46,22 @@ const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderC
                   { index + 1 }. { item.type === 'fallback' || item.type === 'receive' ? item.type : item.name }
                 </Box>
                 { item.type === 'fallback' && (
-                  <Tooltip
-                    label={ `The fallback function is executed on a call to the contract if none of the other functions match 
-                    the given function signature, or if no data was supplied at all and there is no receive Ether function. 
-                    The fallback function always receives data, but in order to also receive Ether it must be marked payable.` }
-                    placement="top"
-                    maxW="320px"
-                  >
-                    <Box cursor="pointer" display="inherit">
-                      <Icon as={ infoIcon } boxSize={ 5 }/>
-                    </Box>
-                  </Tooltip>
+                  <Hint
+                    label={
+                      `The fallback function is executed on a call to the contract if none of the other functions match 
+                        the given function signature, or if no data was supplied at all and there is no receive Ether function. 
+                        The fallback function always receives data, but in order to also receive Ether it must be marked payable.`
+                    }/>
                 ) }
                 { item.type === 'receive' && (
-                  <Tooltip
-                    label={ `The receive function is executed on a call to the contract with empty calldata. 
-                    This is the function that is executed on plain Ether transfers (e.g. via .send() or .transfer()). 
-                    If no such function exists, but a payable fallback function exists, the fallback function will be called on a plain Ether transfer. 
-                    If neither a receive Ether nor a payable fallback function is present, 
-                    the contract cannot receive Ether through regular transactions and throws an exception.` }
-                    placement="top"
-                    maxW="320px"
-                  >
-                    <Box cursor="pointer" display="inherit">
-                      <Icon as={ infoIcon } boxSize={ 5 }/>
-                    </Box>
-                  </Tooltip>
+                  <Hint
+                    label={
+                      `The receive function is executed on a call to the contract with empty calldata. 
+                        This is the function that is executed on plain Ether transfers (e.g. via .send() or .transfer()). 
+                        If no such function exists, but a payable fallback function exists, the fallback function will be called on a plain Ether transfer. 
+                        If neither a receive Ether nor a payable fallback function is present, 
+                        the contract cannot receive Ether through regular transactions and throws an exception.`
+                    }/>
                 ) }
                 <AccordionIcon/>
               </AccordionButton>

ui/home/StatsItem.tsx

-import { Box, Flex, Icon, Text, useColorModeValue, chakra, Tooltip, LightMode } from '@chakra-ui/react';
+import type { TooltipProps } from '@chakra-ui/react';
+import { Flex, Icon, Text, useColorModeValue, chakra, LightMode } from '@chakra-ui/react';
 import React from 'react';
 
-import infoIcon from 'icons/info.svg';
 import breakpoints from 'theme/foundations/breakpoints';
+import Hint from 'ui/shared/Hint';
 
 type Props = {
   icon: React.FC<React.SVGAttributes<SVGElement>>;
@@ -15,6 +16,14 @@ type Props = {
 
 const LARGEST_BREAKPOINT = '1240px';
 
+const TOOLTIP_PROPS: Partial<TooltipProps> = {
+  hasArrow: false,
+  borderRadius: 'md',
+  placement: 'bottom-end',
+  offset: [ 0, 0 ],
+  bgColor: 'blackAlpha.900',
+};
+
 const StatsItem = ({ icon, title, value, className, tooltipLabel, url }: Props) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const sxContainer = {} as any;
@@ -55,20 +64,15 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel, url }: Props)
       </Flex>
       { tooltipLabel && (
         <LightMode>
-          <Tooltip label={ tooltipLabel } hasArrow={ false } borderRadius="12px" placement="bottom-end" offset={ [ 0, 0 ] } bgColor="blackAlpha.900">
-            <Box
-              position="absolute"
-              top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
-              right="10px"
-              cursor="pointer"
-            >
-              <Icon
-                as={ infoIcon }
-                boxSize={ 6 }
-                color={ infoColor }
-              />
-            </Box>
-          </Tooltip>
+          <Hint
+            label={ tooltipLabel }
+            tooltipProps={ TOOLTIP_PROPS }
+            boxSize={ 6 }
+            color={ infoColor }
+            position="absolute"
+            top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
+            right="10px"
+          />
         </LightMode>
       ) }
     </Flex>

ui/home/indicators/ChainIndicators.tsx

-import { Box, Flex, Icon, Skeleton, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
-import infoIcon from 'icons/info.svg';
 import useApiQuery from 'lib/api/useApiQuery';
+import Hint from 'ui/shared/Hint';
 
 import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
 import ChainIndicatorItem from './ChainIndicatorItem';
@@ -72,13 +72,7 @@ const ChainIndicators = () => {
       <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
         <Flex alignItems="center">
           <Text fontWeight={ 500 } fontFamily="heading" fontSize="lg">{ indicator?.title }</Text>
-          { indicator?.hint && (
-            <Tooltip label={ indicator.hint } maxW="300px">
-              <Box display="inline-flex" cursor="pointer" ml={ 1 }>
-                <Icon as={ infoIcon } boxSize={ 4 }/>
-              </Box>
-            </Tooltip>
-          ) }
+          { indicator?.hint && <Hint label={ indicator.hint } ml={ 1 }/> }
         </Flex>
         { valueTitle }
         <ChainIndicatorChartContainer { ...queryResult }/>

ui/shared/CopyToClipboard.tsx

-import { IconButton, Tooltip, useClipboard, chakra } from '@chakra-ui/react';
+import { IconButton, Tooltip, useClipboard, chakra, useDisclosure } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
 import CopyIcon from 'icons/copy.svg';
@@ -6,6 +6,8 @@ import CopyIcon from 'icons/copy.svg';
 const CopyToClipboard = ({ text, className }: {text: string; className?: string}) => {
   const { hasCopied, onCopy } = useClipboard(text, 3000);
   const [ copied, setCopied ] = useState(false);
+  // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
+  const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
 
   useEffect(() => {
     if (hasCopied) {
@@ -15,8 +17,13 @@ const CopyToClipboard = ({ text, className }: {text: string; className?: string}
     }
   }, [ hasCopied ]);
 
+  const handleClick = React.useCallback(() => {
+    onToggle();
+    onCopy();
+  }, [ onCopy, onToggle ]);
+
   return (
-    <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } closeOnClick={ false }>
+    <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ isOpen }>
       <IconButton
         aria-label="copy"
         icon={ <CopyIcon/> }
@@ -25,11 +32,13 @@ const CopyToClipboard = ({ text, className }: {text: string; className?: string}
         variant="simple"
         display="inline-block"
         flexShrink={ 0 }
-        onClick={ onCopy }
+        onClick={ handleClick }
         className={ className }
+        onMouseEnter={ onOpen }
+        onMouseLeave={ onClose }
       />
     </Tooltip>
   );
 };
 
-export default chakra(CopyToClipboard);
+export default React.memo(chakra(CopyToClipboard));

ui/shared/DetailsInfoItem.tsx

-import { GridItem, Icon, Flex, Tooltip, Box, Text } from '@chakra-ui/react';
+import { GridItem, Flex, Text } from '@chakra-ui/react';
 import type { HTMLChakraProps } from '@chakra-ui/system';
 import React from 'react';
 
-import infoIcon from 'icons/info.svg';
+import Hint from 'ui/shared/Hint';
 
 interface Props extends Omit<HTMLChakraProps<'div'>, 'title'> {
   title: React.ReactNode;
@@ -16,15 +16,7 @@ const DetailsInfoItem = ({ title, hint, note, children, id, ...styles }: Props)
     <>
       <GridItem py={{ base: 1, lg: 2 }} id={ id } lineHeight={ 5 } { ...styles } whiteSpace="nowrap" _notFirst={{ mt: { base: 3, lg: 0 } }}>
         <Flex columnGap={ 2 } alignItems="flex-start">
-          <Tooltip
-            label={ hint }
-            placement="top"
-            maxW="320px"
-          >
-            <Box cursor="pointer" display="inherit">
-              <Icon as={ infoIcon } boxSize={ 5 }/>
-            </Box>
-          </Tooltip>
+          <Hint label={ hint }/>
           <Text fontWeight={{ base: 700, lg: 500 }}>
             { title }
             { note && <Text fontWeight={ 500 } variant="secondary" fontSize="xs" className="note" align="right">{ note }</Text> }

ui/shared/Hint.tsx

+import type { TooltipProps } from '@chakra-ui/react';
+import { chakra, IconButton, Tooltip, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import InfoIcon from 'icons/info.svg';
+
+interface Props {
+  label: string | React.ReactNode;
+  className?: string;
+  tooltipProps?: Partial<TooltipProps>;
+}
+
+const Hint = ({ label, className, tooltipProps }: Props) => {
+  // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
+  const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
+
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    onToggle();
+  }, [ onToggle ]);
+
+  return (
+    <Tooltip
+      label={ label }
+      placement="top"
+      maxW="320px"
+      isOpen={ isOpen }
+      { ...tooltipProps }
+    >
+      <IconButton
+        colorScheme="none"
+        aria-label="hint"
+        icon={ <InfoIcon/> }
+        boxSize={ 5 }
+        variant="simple"
+        display="inline-block"
+        flexShrink={ 0 }
+        className={ className }
+        onMouseEnter={ onOpen }
+        onMouseLeave={ onClose }
+        onClick={ handleClick }
+      />
+    </Tooltip>
+  );
+};
+
+export default React.memo(chakra(Hint));