React MUI tooltip bigger arrow - css

Question

I'm trying to achieve bigger tooltip arrow using Material UI v4. I saw workaround for react-tooltip library using css property border-width. Is there any workaround for MUI tooltip arrow?

Answer 1

You need to override two style classes.
If overriding popperArrow class, styles apply to the Popper component if arrow={true} and if overriding arrow class, styles apply to arrow element when overriding arrow class.
const useStyles = makeStyles({
popperArrow: arrowGenerator(),
arrow: {
width: 24,
height: 17, /* = width / sqrt(2) = (length of the hypotenuse) */,
}
});
export default function ArrowTooltips() {
const classes = useStyles();
return (
<Tooltip title="Add" arrow classes={classes}>
<Button>Arrow</Button>
</Tooltip>
);
}
Function arrowGenerator is defined to apply different styles based on the placement of the Tooltip.
function arrowGenerator() {
return {
'&[x-placement*="bottom"] $arrow': {
marginTop: -17
},
'&[x-placement*="top"] $arrow': {
marginBottom: "-0.71em"
},
'&[x-placement*="right"] $arrow': {
marginLeft: "-0.71em"
},
'&[x-placement*="left"] $arrow': {
marginRight: "-0.71em"
}
};
}
To have the best result you need to set margin values in this function according to the values you set for width and height when overriding arrow class.
Say you set placement="bottom" prop on your component, in '&[x-placement*="bottom"] $arrow': you need to set marginTop to the minus value of height you set for your arrow.
Reference: Tooltip file