stylesheets/components/_tooltip.scss in rapido-css-0.1.7 vs stylesheets/components/_tooltip.scss in rapido-css-0.1.8

@@ -30,10 +30,50 @@
 
 */
 
 @if $tooltips {
 
+  [data-tooltip-position="top"] + .tooltip {
+    @include translate(0, -.50em);
+    &:after {
+      @include triangle(em($tooltip-triangle-size), $tooltip-background, down);
+      left: 50%;
+      margin-left: (neg(em($tooltip-triangle-size)) / 2);
+      bottom: neg(em($tooltip-triangle-size));
+    }
+  }
+
+  [data-tooltip-position="bottom"] + .tooltip {
+    @include translate(0, .50em);
+    &:after {
+      @include triangle(em($tooltip-triangle-size), $tooltip-background, up);
+      left: 50%;
+      margin-left: (neg(em($tooltip-triangle-size)) / 2);
+      top: neg(em($tooltip-triangle-size));
+    }
+  }
+
+  [data-tooltip-position="left"] + .tooltip {
+    @include translate(-.50em, 0);
+    &:after {
+      @include triangle(em($tooltip-triangle-size), $tooltip-background, right);
+      right: neg(em($tooltip-triangle-size));
+      top: 50%;
+      margin-top: (neg(em($tooltip-triangle-size)) / 2);
+    }
+  }
+
+  [data-tooltip-position="right"] + .tooltip {
+    @include translate(.50em, 0);
+    &:after {
+      @include triangle(em($tooltip-triangle-size), $tooltip-background, left);
+      left: neg(em($tooltip-triangle-size));
+      top: 50%;
+      margin-top: (neg(em($tooltip-triangle-size)) / 2);
+    }
+  }
+
   .tooltip {
     @extend %tooltip !optional;
     @include border-radius();
     @include opacity(0);
     @include transition($tooltip-transition-duration);
@@ -44,10 +84,11 @@
     visibility: hidden;
     max-width: 300px;
 
     &.open {
       @include opacity(1);
+      @include translate(0,0);
       max-height: $dropdowns-height;
       visibility: visible;
     }
 
     &:after {
@@ -56,34 +97,7 @@
       position: absolute;
     }
 
   }
 
-  [data-tooltip-position="top"] + .tooltip:after {
-    @include triangle($tooltip-triangle-size, $tooltip-background, down);
-    left: 50%;
-    margin-left: (neg($tooltip-triangle-size) / 2);
-    bottom: neg($tooltip-triangle-size);
-  }
-
-  [data-tooltip-position="bottom"] + .tooltip:after {
-    @include triangle($tooltip-triangle-size, $tooltip-background, up);
-    left: 50%;
-    margin-left: (neg($tooltip-triangle-size) / 2);
-    top: neg($tooltip-triangle-size);
-  }
-
-  [data-tooltip-position="left"] + .tooltip:after {
-    @include triangle($tooltip-triangle-size, $tooltip-background, right);
-    right: neg($tooltip-triangle-size);
-    top: 50%;
-    margin-top: (neg($tooltip-triangle-size) / 2);
-  }
-
-  [data-tooltip-position="right"] + .tooltip:after {
-    @include triangle($tooltip-triangle-size, $tooltip-background, left);
-    left: neg($tooltip-triangle-size);
-    top: 50%;
-    margin-top: (neg($tooltip-triangle-size) / 2);
-  }
 
 }