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 | import React from 'react';
import { Tooltip as MUITooltip, TooltipProps, useTheme } from '@mui/material';
import { useDeviceInfo } from '../../utils';
export default function Tooltip({
children,
placement = 'top-start',
slotProps,
sx,
title,
}: TooltipProps): JSX.Element {
const [open, setOpen] = React.useState(false);
const { isMobile } = useDeviceInfo();
const theme = useTheme();
const handleTooltipClose = () => {
setOpen(false);
};
const handleTooltipOpen = (event: React.SyntheticEvent | Event) => {
if (event.type === 'click' || (event.type === 'mouseover' && !isMobile)) {
setOpen(true);
}
};
return (
<MUITooltip
arrow={true}
onOpen={handleTooltipOpen}
onClose={handleTooltipClose}
open={open}
placement={placement}
slotProps={slotProps}
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,
},
},
},
...(Array.isArray(sx) ? sx : [sx]),
]}
title={title}
>
<span onClick={handleTooltipOpen}>{children}</span>
</MUITooltip>
);
}
|