material ui Tooltip distance from the anchor

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.

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.

You can handle it with CSS by increasing the margin-top of the tooltip.

Either you do it within React like the sample here

Or you do it inside a CSS file like that:

 .MuiTooltip-popper {    margin-top: 10px;}