From 2ec0b55152b2a7c1d163a1a25d0b9c8e04419321 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Wed, 27 Apr 2016 16:57:24 -0700 Subject: [PATCH] Fix data-click-open tooltip behavior --- docs/pages/tooltip.md | 15 +++++++++++++++ js/foundation.tooltip.js | 12 +++++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/docs/pages/tooltip.md b/docs/pages/tooltip.md index c1919d107..e829db768 100644 --- 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 +

+this +tooltip will stay open + +while +this one will only be open when hovered +

+``` + +--- + ## 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 `` element. diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js index 827fcd298..dc17c3c73 100644 --- 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(); } }) -- 2.47.2