[Tooltip] Fix excess spacing

[benneq]

• I have followed (at least) the PR section of the contributing guide.

This fixed to Tooltip hover. Now the mouse can move between Button and Tooltip, but the Tooltip disappears when mouse cursor is beyond the Tooltip

Related to #23232 (comment)

[oliviertassinari]

We need the margin in both directions because it can swap direction (when there isn't enough space).

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 77a3fba

[benneq]

You mean when when bottom Tooltip hits the bottom of the screen and flips to top? I hoped that Tooltip would then switch the CSS class to the top version, which then has the margin on the opposite (= correct) site

…

Am 24.10.2020 um 20:17 schrieb mui-pr-bot ***@***.***>:  Bundle size will be reported once Azure build #16918 finishes. Generated by 🚫 dangerJS against b39b478 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[oliviertassinari]

I hoped that Tooltip would then switch the CSS class to the top version, which then has the margin on the opposite (= correct) site

We didn't implement it this way, but we could consider it. It might be a bit harder to customize but that could mitigate the issue we have. Still, I think that we should get @eps1lon if your change is OK from an a11y point of view.

[benneq]

It might be a bit harder to customize but that could mitigate the issue we have.

I played around a bit with the code, and it seems it already works like expected:

https://github.com/mui-org/material-ui/blob/4fa3f7bc30da1c86bb5702df06dbcff61c538e4b/packages/material-ui/src/Tooltip/Tooltip.js#L563
placementInner automatically switches from bottom to top if the button is at the bottom of the screen. Though it automatically applies tooltipPlacementTop when position = 'bottom'.

Or did I miss something?

[eps1lon]

Good catch 👍 Should be fine since we still have padding and with a magnifier it should have sufficient hit area.

Aside: The distance should probably be customizable anyway. Seems to me that in certain UIs the tooltip is too far away e.g. in the top toolbar (with the search) of https://deploy-preview-23233--material-ui.netlify.app/components/tooltips/#main-content there's no real reason to move it 14px away (which doesn't even align with the grid).