fix(tooltip): position fix (#848)

carbon-design-system · Jun 1, 2018 · 8d01153 · 8d01153
1 parent d855cfe
commit 8d01153
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 17 deletions.
diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
@@ -64,7 +64,6 @@
     display: none;
     max-width: rem(240px);
     background: $ui-01;
-    margin-top: $spacing-xs;
     padding: $spacing-md;
     border: 1px solid $ui-03;
     border-radius: rem(4px);
@@ -99,13 +98,11 @@
     }
 
     &[data-floating-menu-direction='left'] {
-      margin-left: -$spacing-sm;
-
       .#{$prefix}--tooltip__caret {
         left: auto;
-        top: 44.7%;
+        top: 50%;
         right: rem(-5px);
-        transform: rotate(-45deg);
+        transform: rotate(-45deg) translate(50%, -50%);
       }
     }
 
@@ -118,13 +115,11 @@
     }
 
     &[data-floating-menu-direction='right'] {
-      margin-left: $spacing-sm;
-
       .#{$prefix}--tooltip__caret {
         left: rem(-5px);
-        top: 44.7%;
+        top: 50%;
         right: auto;
-        transform: rotate(135deg);
+        transform: rotate(135deg) translate(-50%, 50%);
       }
     }
   }

diff --git a/src/components/tooltip/tooltip.hbs b/src/components/tooltip/tooltip.hbs
@@ -8,7 +8,7 @@
     </svg>
   </div>
 </div>
-<div id="unique-tooltip" data-floating-menu-direction="top" class="bx--tooltip">
+<div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip">
   <span class="bx--tooltip__caret"></span>
   <p>This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed
     please use a modal instead.</p>

diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
@@ -39,13 +39,6 @@ const getMenuOffset = (menuBody, menuDirection) => {
   values[arrowPositionProp] = values[arrowPositionProp] || -6; // IE, etc.
   if (Object.keys(values).every(name => !isNaN(values[name]))) {
     const { [arrowPositionProp]: arrowPosition, 'border-bottom-width': borderBottomWidth } = values;
-    if (arrowPositionProp === 'bottom') {
-      return {
-        left: 0,
-        top: 0,
-        [menuPositionAdjustmentProp]: Math.sqrt(borderBottomWidth ** 2 * 2) - arrowPosition * 4,
-      };
-    }
     return {
       left: 0,
       top: 0,