Fix tooltip positioning to separately account for voffset/hoffset and tooltip width...

diff --git a/js/foundation.positionable.js b/js/foundation.positionable.js
index 4fde158d0a4a0e908f902d15527c209ecdece1d8..04f7ee367190cc9e0a80e1eb5feee8eac41ab947 100644 (file)
--- 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 7bd38c392ec550224150cf84c93d92a010980d7f..2da0157723a35742767aff86748c5fa5a9b3266f 100644 (file)
--- 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 cbc3f0a9487e7d63d5241fab7d39a3e8900ea291..6f286bf0d6a7c0ea49e1d53aeb7cdf9b82bc2812 100644 (file)
--- 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>