Fix pip positioning for aligned tooltips

diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js
index 2da0157723a35742767aff86748c5fa5a9b3266f..82b2cfd1367dad28d7916718667ad1a1ce4cf37e 100644 (file)
--- a/js/foundation.tooltip.js
+++ b/js/foundation.tooltip.js
@@ -132,6 +132,7 @@ class Tooltip extends Positionable {
     this.template.css('visibility', 'hidden').show();
     this._setPosition();
     this.template.removeClass('top bottom left right').addClass(this.position)
+    this.template.removeClass('align-top align-bottom align-left align-right align-center').addClass('align-' + this.alignment);
 
     /**
      * Fires to close all other open tooltips on the page

diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss
index f363d3f8768e464fa4026dbf98229bcb023a0430..ef1de4f6440a203f8f8fdb6b9c288ba81f0bc99d 100644 (file)
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@@ -69,34 +69,79 @@ $tooltip-radius: $global-radius !default;
   color: $tooltip-color;
 
   &::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
     position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
   }
 
-  &.top::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
-    top: 100%;
-    bottom: auto;
+  &.bottom {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+      bottom: 100%;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
-  &.left::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
-    top: 50%;
-    bottom: auto;
-    left: 100%;
-    transform: translateY(-50%);
+  &.top {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
+      top: 100%;
+      bottom: auto;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.left {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
+      left: 100%;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &.right {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
+      right: 100%;
+      left: auto;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
-  &.right::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
-    top: 50%;
-    right: 100%;
+  &.align-top::before {
     bottom: auto;
+    top: 10%;
+  }
+
+  &.align-bottom::before {
+    bottom: 10%;
+    top: auto;
+  }
+
+  &.align-left::before {
+    left: 10%;
+    right: auto;
+  }
+
+  &.align-right::before {
     left: auto;
-    transform: translateY(-50%);
+    right: 10%;
   }
 }