Arrow tooltip not positioning correctly

[fillipe-ramos]

Using arrow tooltips and placing it on the left or right side of the element creates an unaligned arrow.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The arrow should align to the middle

Current Behavior 😯

The arrow doesn't align to the middle due to a top style added to it that has a lower value than it should to align the arrow to the middle:

Steps to Reproduce 🕹

Codesandbox straight out of material-ui page, only added the placement prop. Hover any of the middle elements.

1. https://codesandbox.io/s/material-demo-4jzbx

Context 🔦

I was trying to have an arrowed tooltip that opens to the left of the hovered element.

Your Environment 🌎

Tech	Version
Material-UI	v4.3.0
React	16.8.6
Browser	Tested on Safari and Chrome on MacOS both latest version
TypeScript	3.5.3

[oliviertassinari]

@fillipe-ramos Oops, it seems that the tooltip's arrow dimensions are not correct. Does this change solve the problem for you?

diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.tsx b/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.tsx b/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
index 341d3ab0e..ce947047e 100644
--- a/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
+++ b/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
@@ -10,7 +10,7 @@ function arrowGenerator(color: string) {
       top: 0,
       left: 0,
       marginTop: '-0.95em',
-      width: '3em',
+      width: '2em',
       height: '1em',
       '&::before': {
         borderWidth: '0 1em 1em 1em',
@@ -21,7 +21,7 @@ function arrowGenerator(color: string) {
       bottom: 0,
       left: 0,
       marginBottom: '-0.95em',
-      width: '3em',
+      width: '2em',
       height: '1em',
       '&::before': {
         borderWidth: '1em 1em 0 1em',
@@ -31,7 +31,7 @@ function arrowGenerator(color: string) {
     '&[x-placement*="right"] $arrow': {
       left: 0,
       marginLeft: '-0.95em',
-      height: '3em',
+      height: '2em',
       width: '1em',
       '&::before': {
         borderWidth: '1em 1em 1em 0',
@@ -41,7 +41,7 @@ function arrowGenerator(color: string) {
     '&[x-placement*="left"] $arrow': {
       right: 0,
       marginRight: '-0.95em',
-      height: '3em',
+      height: '2em',
       width: '1em',
       '&::before': {
         borderWidth: '1em 0 1em 1em',
@@ -68,8 +68,6 @@ const useStylesArrow = makeStyles((theme: Theme) =>
     arrow: {
       position: 'absolute',
       fontSize: 6,
-      width: '3em',
-      height: '3em',
       '&::before': {
         content: '""',
         margin: 'auto',
@@ -116,8 +114,6 @@ const useStylesBootstrap = makeStyles((theme: Theme) =>
     arrow: {
       position: 'absolute',
       fontSize: 6,
-      width: '3em',
-      height: '3em',
       '&::before': {
         content: '""',
         margin: 'auto',

Do you want to submit a pull request? :)

[fillipe-ramos]

It does fix my problem. Thank you, @oliviertassinari.

Created the PR