From: Kevin Ball <kmball11@gmail.com>
Date: Wed, 31 May 2017 20:47:29 +0000 (-0700)
Subject: Fix pip positioning for aligned tooltips
X-Git-Tag: v6.4.0-rc1~19^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=46bd936a28a5226410cc1dd0b892ece4edcda059;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Fix pip positioning for aligned tooltips
---

diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js
index 2da015772..82b2cfd13 100644
--- 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 f363d3f87..ef1de4f64 100644
--- 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%;
   }
 }