Material-ui: [Tooltip] Arrow placement issue

[buraksakalli]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When i add any special character in message, a line which is side of arrow shows up (Tooltip placement is left)

Expected Behavior 🤔

Should no line or etc.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.7 |
| React | v16.13.0 |
| Browser |Firefox 76.0b4 |

[oliviertassinari]

Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[buraksakalli]

@oliviertassinari
You can reach the test case in here;
https://codesandbox.io/s/kind-water-qi96n?file=/src/App.tsx

If you hover Bug and NoBug texts you can see the problem

[oliviertassinari]

@buraksakalli Thanks for the reproduction, what do you think of this patch?

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 6c77af1b6..1083a2e08 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -25,7 +25,7 @@ function arrowGenerator() {
       flip: false,
       top: 0,
       left: 0,
-      marginTop: '-0.95em',
+      marginTop: '-1em',
       marginLeft: 4,
       marginRight: 4,
       width: '2em',
@@ -40,7 +40,7 @@ function arrowGenerator() {
       flip: false,
       bottom: 0,
       left: 0,
-      marginBottom: '-0.95em',
+      marginBottom: '-1em',
       marginLeft: 4,
       marginRight: 4,
       width: '2em',
@@ -54,7 +54,7 @@ function arrowGenerator() {
     '&[x-placement*="right"] $arrow': {
       flip: false,
       left: 0,
-      marginLeft: '-0.95em',
+      marginLeft: '-1em',
       marginTop: 4,
       marginBottom: 4,
       height: '2em',
@@ -68,7 +68,7 @@ function arrowGenerator() {
     '&[x-placement*="left"] $arrow': {
       flip: false,
       right: 0,
-      marginRight: '-0.95em',
+      marginRight: '-1em',
       marginTop: 4,
       marginBottom: 4,
       height: '2em',

Do you want to submit a pull request? :)

[buraksakalli]

@oliviertassinari I've tried it yet but not solved

[esseswann]

FYI on my 4k display it is visible on both examples

[oliviertassinari]

@esseswann Does the proposed patch solve it?

[buraksakalli]

FYI on my 4k display it is visible on both examples

@esseswann, @oliviertassinari
You're right, but the patch didn't solve it.

[oliviertassinari]

@buraksakalli How did you try the patch?

[buraksakalli]

@buraksakalli How did you try the patch?

I've applied your advices to Tooltip.js

[oliviertassinari]

@buraksakalli If you are referring to the Tooltip.js that is present in your node_modules, there are two. Does it display something if you add a console.log('edit');?

[esseswann]

I checked the 1em solution in multiple browsers it seems to be fixing it. There is some very slight non-pleasant effect during the intro transition when browser lags to calculate correct position of the arrow but AFAIK such problems can only be solved with SVG-based whole-element solution