From 3bcc87e3e6cfabac72167669da900b3706650e85 Mon Sep 17 00:00:00 2001
From: Kevin Ball <kmball11@gmail.com>
Date: Wed, 31 May 2017 10:49:32 -0700
Subject: [PATCH] Fix tooltip positioning to separately account for
 voffset/hoffset and tooltip width/height

---
 js/foundation.positionable.js     | 12 ++--------
 js/foundation.tooltip.js          | 38 +++++++++++++++++++++++++++----
 test/visual/dropdown/offsets.html |  8 +++----
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/js/foundation.positionable.js b/js/foundation.positionable.js
index 4fde158d0..04f7ee367 100644
--- a/js/foundation.positionable.js
+++ b/js/foundation.positionable.js
@@ -108,19 +108,11 @@ class Positionable extends Plugin {
   // it's possible someone might actually want to start from center and then nudge
   // slightly off.
   _getVOffset() {
-    if(this.alignment === 'center' && (this.position === 'left' || this.position === 'right')) {
-      return 0;
-    } else {
-      return this.options.vOffset;
-    }
+    return this.options.vOffset;
   }
 
   _getHOffset() {
-    if(this.alignment === 'center' && (this.position === 'top' || this.position === 'bottom')) {
-      return 0;
-    } else {
-      return this.options.hOffset;
-    }
+    return this.options.hOffset;
   }
 
 
diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js
index 7bd38c392..2da015772 100644
--- a/js/foundation.tooltip.js
+++ b/js/foundation.tooltip.js
@@ -75,6 +75,22 @@ class Tooltip extends Positionable {
     return 'center';
   }
 
+  _getHOffset() {
+    if(this.position === 'left' || this.position === 'right') {
+      return this.options.hOffset + this.options.tooltipWidth;
+    } else {
+      return this.options.hOffset
+    }
+  }
+
+  _getVOffset() {
+    if(this.position === 'top' || this.position === 'bottom') {
+      return this.options.vOffset + this.options.tooltipHeight;
+    } else {
+      return this.options.vOffset
+    }
+  }
+
   /**
    * builds the tooltip element, adds attributes, and returns the template.
    * @private
@@ -398,16 +414,30 @@ Tooltip.defaults = {
    * Distance, in pixels, the template should push away from the anchor on the Y axis.
    * @option
    * @type {number}
-   * @default 10
+   * @default 0
+   */
+  vOffset: 0,
+  /**
+   * Distance, in pixels, the template should push away from the anchor on the X axis
+   * @option
+   * @type {number}
+   * @default 0
+   */
+  hOffset: 0,
+  /**
+   * Distance, in pixels, the template spacing auto-adjust for a vertical tooltip
+   * @option
+   * @type {number}
+   * @default 14
    */
-  vOffset: 10,
+  tooltipHeight: 14,
   /**
-   * Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.
+   * Distance, in pixels, the template spacing auto-adjust for a horizontal tooltip
    * @option
    * @type {number}
    * @default 12
    */
-  hOffset: 12,
+  tooltipWidth: 12,
     /**
    * Allow HTML in tooltip. Warning: If you are loading user-generated content into tooltips,
    * allowing HTML may open yourself up to XSS attacks.
diff --git a/test/visual/dropdown/offsets.html b/test/visual/dropdown/offsets.html
index cbc3f0a94..6f286bf0d 100644
--- a/test/visual/dropdown/offsets.html
+++ b/test/visual/dropdown/offsets.html
@@ -33,7 +33,7 @@
           <p>Bottom Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push down and ignore the horizontal offset.</p>
+            <p>This offset should push down and to the global right (right)</p>
           </div>
         </div>
 
@@ -57,7 +57,7 @@
           <p>Top Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push up and ignore the horizontal offset.</p>
+            <p>This offset should push up and to the global right (right)</p>
           </div>
         </div>
 
@@ -92,14 +92,14 @@
           <p>Right Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push right and ignore the vertical offset.</p>
+            <p>This offset should push right and down</p>
           </div>
         </div>
         <div class="column">
           <p>Left Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push left and ignore the vertical offset.</p>
+            <p>This offset should push left and down</p>
           </div>
         </div>
 
-- 
2.47.2