migrate other components to Hint

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/DetailsInfoItem.tsx

@@ -16,7 +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">
-          <Hint text={ hint }/>
+          <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 {
-  text: string;
+  label: string | React.ReactNode;
   className?: string;
+  tooltipProps?: Partial<TooltipProps>;
 }
 
-const Hint = ({ text, className }: Props) => {
+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={ text }
+      label={ label }
       placement="top"
       maxW="320px"
       isOpen={ isOpen }
+      { ...tooltipProps }
     >
       <IconButton
         colorScheme="none"
@@ -29,7 +38,7 @@ const Hint = ({ text, className }: Props) => {
         className={ className }
         onMouseEnter={ onOpen }
         onMouseLeave={ onClose }
-        onClick={ onToggle }
+        onClick={ handleClick }
       />
     </Tooltip>
   );