From aa589611693b4865aca991ba0f374ea0f797b680 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sat, 31 Mar 2018 18:09:53 +0200 Subject: [PATCH] feat: add back official `disableForTouch` option for Tooltip #9995 Changes: * Add documentation for the `disableForTouch` option * Prevent any event to be triggerd on touch with `disableForTouch`, including mouse enter/leave and focus events Closes https://github.com/zurb/foundation-sites/issues/9995 --- js/foundation.tooltip.js | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js index 2f2a50fb5..41f99d4fb 100644 --- a/js/foundation.tooltip.js +++ b/js/foundation.tooltip.js @@ -191,12 +191,15 @@ class Tooltip extends Positionable { * @private */ _events() { - var _this = this; - var $template = this.template; + const _this = this; + const hasTouch = 'ontouchstart' in window || (typeof window.ontouchstart !== 'undefined'); + const $template = this.template; var isFocus = false; - if (!this.options.disableHover) { + // `disableForTouch: Fully disable the tooltip on touch devices + if (hasTouch && this.options.disableForTouch) return; + if (!this.options.disableHover) { this.$element .on('mouseenter.zf.tooltip', function(e) { if (!_this.isActive) { @@ -213,6 +216,13 @@ class Tooltip extends Positionable { }); } + if (hasTouch) { + this.$element + .on('tap.zf.tooltip touchend.zf.tooltip', function (e) { + _this.isActive ? _this.hide() : _this.show(); + }); + } + if (this.options.clickOpen) { this.$element.on('mousedown.zf.tooltip', function(e) { e.stopImmediatePropagation(); @@ -233,13 +243,6 @@ class Tooltip extends Positionable { }); } - if (!this.options.disableForTouch) { - this.$element - .on('tap.zf.tooltip touchend.zf.tooltip', function(e) { - _this.isActive ? _this.hide() : _this.show(); - }); - } - this.$element.on({ // 'toggle.zf.trigger': this.toggle.bind(this), // 'close.zf.trigger': this.hide.bind(this) @@ -300,7 +303,6 @@ class Tooltip extends Positionable { } Tooltip.defaults = { - disableForTouch: false, /** * Time, in ms, before a tooltip should open on hover. * @option @@ -329,6 +331,15 @@ Tooltip.defaults = { * @default false */ disableHover: false, + /** + * Disable the tooltip for touch devices. + * This can be useful to make elements with a tooltip on it trigger their + * action on the first tap instead of displaying the tooltip. + * @option + * @type {booelan} + * @default false + */ + disableForTouch: false, /** * Optional addtional classes to apply to the tooltip template on init. * @option -- 2.47.2