Fix data-click-open tooltip behavior

diff --git a/docs/pages/tooltip.md b/docs/pages/tooltip.md
index c1919d107eed359fb865736f1c6d120abb563ade..e829db7688c0bc71fd612b65c116a31f1270ac2e 100644 (file)
--- a/docs/pages/tooltip.md
+++ b/docs/pages/tooltip.md
@@ -30,6 +30,21 @@ At the spot thus attained a second peg was driven, and about this, as a centre,
 
 ---
 
+## Tooltip clicking
+By default, clicking on a tooltip will leave it open until you click somewhere else.  However, you can disable that by adding data-click-open="false"
+
+```html_example
+<p>
+this 
+<span data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover="false" tabindex="2" title="You see?  I'm open!">tooltip will stay open</span>
+
+while 
+<span data-tooltip aria-haspopup="true" class="has-tip top" data-click-open="false" data-disable-hover="false" tabindex="2" title="I don't stay open">this one will only be open when hovered</span>
+</p>
+```
+
+---
+
 ## Tooltip Right and Left
 
 You can also position the tooltips to the right and left of the word by adding the classes `.right` or `.left` to the `<span>` element.

diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js
index 827fcd298490d4b3cba946564b9c7aa8951e8878..dc17c3c73afc6dd5f7ef42b82db622f4811d977f 100644 (file)
--- a/js/foundation.tooltip.js
+++ b/js/foundation.tooltip.js
@@ -249,7 +249,7 @@ class Tooltip {
       })
       .on('mouseleave.zf.tooltip', function(e) {
         clearTimeout(_this.timeout);
-        if (!isFocus || (!_this.isClick && _this.options.clickOpen)) {
+        if (!isFocus || (_this.isClick && !_this.options.clickOpen)) {
           _this.hide();
         }
       });
@@ -268,6 +268,11 @@ class Tooltip {
           }
         }
       });
+    } else {
+      this.$element.on('mousedown.zf.tooltip', function(e) {
+        e.stopImmediatePropagation();
+        _this.isClick = true;
+      });
     }
 
     if (!this.options.disableForTouch) {
@@ -286,11 +291,12 @@ class Tooltip {
     this.$element
       .on('focus.zf.tooltip', function(e) {
         isFocus = true;
-        // console.log(_this.isClick);
         if (_this.isClick) {
+          // If we're not showing open on clicks, we need to pretend a click-launched focus isn't
+          // a real focus, otherwise on hover and come back we get bad behavior
+          if(!_this.options.clickOpen) { isFocus = false; }
           return false;
         } else {
-          // $(window)
           _this.show();
         }
       })