1  import { useState } from 'react';
 2  import { InfoOutlineIcon } from '@chakra-ui/icons';
 3  import { Tooltip, TooltipProps } from '@chakra-ui/react';
 4  
 5  interface InfoTooltipProps extends Omit<TooltipProps, 'children'> {
 6    iconSize?: number;
 7  }
 8  
 9  export const InfoTooltip = ({
10    iconSize,
11    label,
12    ...rest
13  }: InfoTooltipProps): JSX.Element => {
14    const [showTooltip, setShowTooltip] = useState(false);
15    return (
16      <Tooltip
17        hasArrow
18        bg="glass.black80"
19        color="white"
20        placement="top"
21        isOpen={showTooltip}
22        label={label}
23        {...rest}
24      >
25        <InfoOutlineIcon
26          boxSize={iconSize || 4}
27          onMouseEnter={() => setShowTooltip((c) => !c)}
28          onMouseLeave={() => setShowTooltip((c) => !c)}
29        />
30      </Tooltip>
31    );
32  };