Material-ui: [Tooltip] Add a way for controlling the distance between the tooltip and its container

[rdsedmundo]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary/Example/Motivation 💡🌈🔦

I'd like to be able to control the distance where the tooltip is placed. I searched through the props, style classes, and also here in the Github issues but I didn't find anything that was easy to configure to achieve this:

I tried some hacks around marginTop and top, but the component recalculates its position based on them so it's ineffective.

[support[bot]]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

Using the padding/margin is the right direction to take.

[rdsedmundo]

Can you please clarify how exactly?
https://codesandbox.io/s/modest-solomon-qjxqk

[oliviertassinari]

This is left to be answered on StackOverflow.

[zeckdude]

This really should be better explained in the documentation.

[zeckdude]

In case anyone is looking for the solution, here it is:

const useTooltipStyles = makeStyles(() => ({
  tooltip: {
    margin: 0,
  },
}));

const classes = useTooltipStyles();

<Tooltip
  title="Tooltip Text"
  classes={classes}
>
  <button>Tooltip Test</button>
</Tooltip>

Unfortunately if you have an arrow, you'll need to calculate that height into the margin so the arrow doesn't sit over the anchor element.

[shahalihridoy]

@zeckdude Thanks for your answer. This is working. But when I tried to override in MUI theme's tooltip options it didn't work.
MuiTooltip: { tooltip: { margin: 0, }, },

I'm not using arrow