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

diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js
index 2f2a50fb54b9d03d104c52a1a63e82ba537ae2ea..41f99d4fbf56ccfd5490e1b49f5964874e873f94 100644 (file)
--- 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