From 37ac5c933a8ba62c468a121351ae9980d4ce9394 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Sat, 2 Jun 2018 04:00:56 +0900
Subject: [PATCH] fix(tooltip): position fix

---
 src/components/tooltip/_tooltip.scss | 13 ++++---------
 src/components/tooltip/tooltip.hbs   |  2 +-
 src/components/tooltip/tooltip.js    |  7 -------
 3 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
index c7ebf828e918..c545db47a0c6 100644
--- 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
index 286d707607df..a8d0c425e35d 100644
--- a/src/components/tooltip/tooltip.hbs
+++ b/src/components/tooltip/tooltip.hbs
@@ -10,7 +10,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
index e15b73e1b9ff..41a0acc78b4c 100644
--- 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,