[Tooltip] Not being placed correctly when used with FormControlLabel checkbox because of default margin-left style

[OmPr366]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/react-qqwxar-c3zrv8?file=demo.tsx

Steps:

1. Pass bottom-end to placement in tooltip
2. Pass bottom-start to placement in tooltip
3. compare both

Current behavior 😯

After passing position parameters in the tooltip both position start and position end is working same.

Expected behavior 🤔

position start and position end should not be same.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[OmPr366]

Can I work on it?

[ZeeshanTamboli]

This should work. Looks like a bug. It doesn't function properly with FormControlLabel that has a checkbox control. It does work with buttons, as illustrated here: https://mui.com/material-ui/react-tooltip/#positioned-tooltips.

@OmPr366 Feel free to work on it.

[ZeeshanTamboli]

@Vivek-Prajapatii In the CodeSandbox you provided (https://codesandbox.io/s/determined-engelbart-4v5mts?file=/Demo.tsx), "Bottom End" placement doesn't work as expected.

[ZeeshanTamboli]

@Vivek-Prajapatii Thanks for providing the solution. I do see that as a workaround, though. Why was margin-left: -11px initially included? I see that the values got changed in #8173 and #15097. But why was it added in the first place? There must be some reason. I think it got turned into a bug now. I found a similar problem with margin-right at #34039. Like there, similarly here, it would be a breaking change to remove it now. Lets keep it tracked it for v6.

[gitstart]

@OmPr366 @ZeeshanTamboli we would like to pick this up

[ZeeshanTamboli]

@gitstart, as mentioned earlier, this change might be breaking, so it's better suited for v6. However, if you have a non-breaking solution, please go ahead and create a PR.