'material ui Tooltip distance from the anchor

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.

reactjstooltipmaterial-ui


Solution 1:[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.

Solution 2:[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.

Solution 3:[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;}

Solution 4:[4]

For Material-UI V.5 it could be done like this:

<Tooltip
        PopperProps={{
            modifiers: [
                {
                    name: "offset",
                    options: {
                        offset: [50, 0],
                    },
                },
            ],
        }}
        .......

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hugo GEORGET
Solution 2 Aaron Frary
Solution 3 Joshua
Solution 4 Abdelrahman Magraby

Related Questions