All files / src/components/IconTooltip index.tsx

0% Statements 0/8
0% Branches 0/8
0% Functions 0/3
0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69                                                                                                                                         
import React from 'react';
import { Tooltip, TooltipProps, useTheme } from '@mui/material';
 
import Icon from '../Icon/Icon';
import { IconName } from '../Icon/icons';
import { useDeviceInfo } from '../../utils';
 
export type IconTooltipProps = {
  iconName?: IconName;
  placement?: TooltipProps['placement'];
  title: TooltipProps['title'];
  disableRightMargin?: boolean;
};
 
export default function IconTooltip({
  iconName = 'info',
  placement = 'top-start',
  title,
  disableRightMargin,
}: IconTooltipProps): JSX.Element {
  const [open, setOpen] = React.useState(false);
  const { isMobile } = useDeviceInfo();
  const theme = useTheme();
 
  const handleTooltipClose = () => {
    setOpen(false);
  };
 
  const handleTooltipOpen = () => {
    setOpen(true);
  };
 
  return (
    <Tooltip
      arrow={true}
      onClose={handleTooltipClose}
      open={isMobile ? open : undefined}
      placement={placement}
      sx={{
        maxWidth: isMobile ? '342px' : '464px',
        '& .MuiTooltip-arrow': {
          color: theme.palette.TwClrBaseGray800,
        },
        '& .MuiTooltip-tooltip': {
          backgroundColor: theme.palette.TwClrBaseGray800,
          color: theme.palette.TwClrBaseWhite,
          padding: '8px',
          '& a': {
            color: theme.palette.TwClrBaseWhite,
          },
        },
      }}
      title={title}
    >
      <span onClick={handleTooltipOpen}>
        <Icon
          name={iconName}
          style={{
            fill: theme.palette.TwClrIcnSecondary,
            marginLeft: '4px',
            marginRight: disableRightMargin ? '0px' : '4px',
            verticalAlign: 'text-top',
          }}
        />
      </span>
    </Tooltip>
  );
}