[Tooltip] Fix arrow placement in RTL languages

[mosijava]

Tooltip's arrow placement in RTL languages is wrong.

Steps:

1. change theme direction to 'rtl'
2. set arrow property in a tooltip component

some thoughts to tackle the problem 🔦

in arrowGenerator() function in tooltip component if we add flip:false to it's JSS then I think the problem could be solved.

[oliviertassinari]

@mosijava Thank you for the bug report. It seems that it has been broken for a long time. It was already broken prior to the addition of the feature to the core:

You are right, flip false seem to be enough (I also take care of the margin for account the border-radius:

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 1246561c5..d2ddc7ded 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -20,43 +20,59 @@ function round(value) {
 function arrowGenerator() {
   return {
     '&[x-placement*="bottom"] $arrow': {
+      flip: false,
       top: 0,
       left: 0,
       marginTop: '-0.95em',
+      marginLeft: 4,
+      marginRight: 4,
       width: '2em',
       height: '1em',
       '&::before': {
+        flip: false,
         borderWidth: '0 1em 1em 1em',
         borderColor: 'transparent transparent currentcolor transparent',
       },
     },
     '&[x-placement*="top"] $arrow': {
+      flip: false,
       bottom: 0,
       left: 0,
       marginBottom: '-0.95em',
+      marginLeft: 4,
+      marginRight: 4,
       width: '2em',
       height: '1em',
       '&::before': {
+        flip: false,
         borderWidth: '1em 1em 0 1em',
         borderColor: 'currentcolor transparent transparent transparent',
       },
     },
     '&[x-placement*="right"] $arrow': {
+      flip: false,
       left: 0,
       marginLeft: '-0.95em',
+      marginTop: 4,
+      marginBottom: 4,
       height: '2em',
       width: '1em',
       '&::before': {
+        flip: false,
         borderWidth: '1em 1em 1em 0',
         borderColor: 'transparent currentcolor transparent transparent',
       },
     },
     '&[x-placement*="left"] $arrow': {
+      flip: false,
       right: 0,
       marginRight: '-0.95em',
+      marginTop: 4,
+      marginBottom: 4,
       height: '2em',
       width: '1em',
       '&::before': {
+        flip: false,
         borderWidth: '1em 0 1em 1em',
         borderColor: 'transparent transparent transparent currentcolor',
       },

Do you want to submit a pull request? :)

[mosijava]

thanks a lot @oliviertassinari
yes it's an honor to do that, actually I have already done it ;)