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 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 51x 51x 3x | import React from 'react';
import { toolTipStyles, toolTipPopperStyles } from './styles';
import MuiTooltip, { TooltipClassKey, TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
import { ClassNameMap } from '@mui/material';
import { cx } from '@emotion/css';
enum TooltipPlacements {
TopStart = 'top-start',
Top = 'top',
TopEnd = 'top-end',
RightStart = 'right-start',
Right = 'right',
RightEnd = 'right-end',
BottomStart = 'bottom-start',
Bottom = 'bottom',
BottomEnd = 'bottom-end',
LeftStart = 'left-start',
Left = 'left',
LeftEnd = 'left-end',
}
export interface TooltipProps extends Omit<MuiTooltipProps, 'className' | 'classes' | 'arrow' | 'placement'> {
readonly className?: string;
readonly classes?: Partial<ClassNameMap<TooltipClassKey>>;
readonly placement?: TooltipPlacements;
}
const Tooltip: React.FunctionComponent<TooltipProps> = ({
children,
classes,
className,
placement = TooltipPlacements.Right,
...materialTooltipProps
}) => {
const classNames = cx(className, toolTipPopperStyles(), classes?.popper);
return (
<MuiTooltip
{...materialTooltipProps}
arrow
classes={{ popper: classNames, tooltip: toolTipStyles() }}
placement={placement}
data-testid={'toolTip'}
>
{children}
</MuiTooltip>
);
};
export { Tooltip, TooltipPlacements };
|