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 71 72 73 74 | 1x 1x 1x 1x 1x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x | import { useHelpTooltip } from '@/shared/hooks/useHelpTooltip.hook';
import Tooltip from '@mui/material/Tooltip';
import { MouseEvent } from 'react';
/**
* A tooltip component that displays help text with customizable timing and styling.
*
* @component
* @category Components
* @param props - The component props
* @returns A tooltip component that displays help text
*
* @example
* ```tsx
* <HelpTooltip
* text="Click here to save your changes"
* delay={1000}
* duration={3000}
* >
* <Button>Save</Button>
* </HelpTooltip>
* ```
* @source
*/
export default function HelpTooltip({
text,
children,
delay = 500,
duration = 2000,
}: HelpTooltipProps) {
const { showHelp, handleTooltipClose, handleTooltipOpen } = useHelpTooltip(delay, duration);
// @todo: Fix this. The onClick is actually triggering a click on the
// child element instead. the preventDefault and stopPropagation are not
// fixing anything..
const handleTooltipClick = (event: MouseEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
handleTooltipClose();
};
return (
<Tooltip
title={text}
placement="left-start"
sx={{
'& .MuiTooltip-tooltip': {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: 'white',
fontSize: '12px',
padding: '4px 8px',
borderRadius: '4px',
maxWidth: '200px',
textAlign: 'center',
fontFamily: 'Arial, sans-serif',
fontWeight: 'bold',
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
opacity: 0.8,
transition: 'opacity 0.3s ease-in-out',
'&:hover': {
opacity: 1,
},
},
}}
onClick={handleTooltipClick}
open={showHelp}
onClose={handleTooltipClose}
onOpen={handleTooltipOpen}
>
{children}
</Tooltip>
);
}
|