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 70 | import React from 'react';
import { Tooltip, TooltipProps, useTheme } from '@mui/material';
import { useDeviceInfo } from '../../utils';
import Icon from '../Icon/Icon';
import { IconName } from '../Icon/icons';
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>
);
}
|