material ui Tooltip distance from the anchor

Question

Is there a clear/easy way to control Tooltip's distance from the anchor element? The default positioning does not fit well for my case, the tooltip is too close to the anchor. I have checked all the props of it and PopperProps no visible option to do that.

Answer 1

You can customize the tooltip's margin using withStyles.

In my case (Material-UI 3), the tooltip was too far away from the anchor.
Here is what I needed :

const StyledTooltip = withStyles({
  tooltipPlacementTop: {
    margin: "4px 0",
  },
})(Tooltip);

I targeted tooltipPlacementTop because it was the rule name when using the placement="top" prop.
You can find the adequate rule names in the Tooltip API documentation.

Last tip: I used the PopperProps={{ keepMounted: true }} prop to see in my navigator's inspector what CSS was applied to the tooltip.

Hope it helps.

Answer 2

Follow up with Hugo's suggestion, since the tooltip position is absolute, instead of changing the margin I changed the anchor position by adjusting the properties right and top like so:

const StyledTooltip = withStyles({
  tooltipPlacementTop: {
    right: "1px",
    top: "8px",
  },
})(Tooltip);

It works as I expected. You can use left or right to adjust the tooltip horizontal position accordingly.

Answer 3

I was using material ui styled to adjust my tooltip properties. I used the normal theme which is available in the MUI documentation.

const LightTooltip = styled(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.white,
    color: 'rgba(0, 0, 0, 0.87)',
    boxShadow: theme.shadows[1],
    fontSize: 11
},}));

I tried to adjust the position property with Mui styled, but it wasn't working. I fixed it with my external style sheet.

.MuiTooltip-popper {
inset: -25px auto 0px auto;}