fix(tooltip): fix regression on touch devices with a mouse

Reverts most of the changes from #8700 and switches to a simpler approach that uses a repeated `touchstart` to hide the tooltip, instead of `touchend`, which fires too early.
Also re-enables mouse events for all kinds of devices, in order to cover cases where the devices has both a touchscreen and a mouse.

Fixes #8710.

Closes #8730

Author: crisbeto

src/components/tooltip/tooltip.js

@@ -34,14 +34,11 @@ angular
  * @param {string=} md-direction Which direction would you like the tooltip to go?  Supports left, right, top, and bottom.  Defaults to bottom.
  */
 function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdTheming, $rootElement,
-                            $animate, $q, $interpolate, $mdConstant) {
-
-  // Note that touch devices still fire mouse events, even though they don't have a
-  // mouse. We shouldn't bind them in those cases, because it causes the callbacks
-  // to fire too often.
-  var ENTER_EVENTS = 'focus ' + ($mdConstant.IS_TOUCH ? 'touchstart' : 'mouseenter');
-  var LEAVE_EVENTS = 'blur ' + ($mdConstant.IS_TOUCH ? 'touchend touchcancel' : 'mouseleave');
-  var TOOLTIP_SHOW_DELAY = $mdConstant.IS_TOUCH ? 75 : 0;
+                            $animate, $q, $interpolate) {
+
+  var ENTER_EVENTS = 'focus touchstart mouseenter';
+  var LEAVE_EVENTS = 'blur touchcancel mouseleave';
+  var TOOLTIP_SHOW_DELAY = 0;
   var TOOLTIP_WINDOW_EDGE_SPACE = 8;
 
   return {
@@ -202,9 +199,9 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
 
       // Store whether the element was focused when the window loses focus.
       var windowBlurHandler = function() {
-        preventNextFocus = document.activeElement === parent[0];
+        elementFocusedOnWindowBlur = document.activeElement === parent[0];
       };
-      var preventNextFocus = false;
+      var elementFocusedOnWindowBlur = false;
 
       function windowScrollHandler() {
         setVisible(false);
@@ -233,18 +230,19 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
 
       var enterHandler = function(e) {
         // Prevent the tooltip from showing when the window is receiving focus.
-        if (e.type === 'focus' && preventNextFocus) {
-          preventNextFocus = false;
+        if (e.type === 'focus' && elementFocusedOnWindowBlur) {
+          elementFocusedOnWindowBlur = false;
+        } else if (e.type === 'touchstart' && scope.visible) {
+          leaveHandler();
         } else if (!scope.visible) {
-          parent.on(LEAVE_EVENTS, leaveHandler );
+          parent.on(LEAVE_EVENTS, leaveHandler);
           setVisible(true);
         }
       };
       var leaveHandler = function () {
         var autohide = scope.hasOwnProperty('autohide') ? scope.autohide : attr.hasOwnProperty('mdAutohide');
 
-        if (autohide || mouseActive || ($document[0].activeElement !== parent[0]) ) {
-
+        if (autohide || mouseActive || $document[0].activeElement !== parent[0]) {
           // When a show timeout is currently in progress, then we have to cancel it.
           // Otherwise the tooltip will remain showing without focus or hover.
           if (showTimeout) {
@@ -253,22 +251,19 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
             showTimeout = null;
           }
 
-          parent.off(LEAVE_EVENTS, leaveHandler );
+          parent.off(LEAVE_EVENTS, leaveHandler);
           parent.triggerHandler('blur');
           setVisible(false);
         }
         mouseActive = false;
       };
       var mousedownHandler = function() {
-        // Don't show the tooltip when tapping on a touch device,
-        // in order to prevent the tooltip staying open after random taps.
-        preventNextFocus = $mdConstant.IS_TOUCH;
         mouseActive = true;
       };
 
       // to avoid `synthetic clicks` we listen to mousedown instead of `click`
       parent.on('mousedown', mousedownHandler);
-      parent.on(ENTER_EVENTS, enterHandler );
+      parent.on(ENTER_EVENTS, enterHandler);
     }
 
     function setVisible (value) {

src/components/tooltip/tooltip.spec.js

@@ -1,16 +1,14 @@
 describe('<md-tooltip> directive', function() {
-  var $compile, $rootScope, $material, $timeout, leaveEvent, enterEvent;
+  var $compile, $rootScope, $material, $timeout;
   var element;
 
   beforeEach(module('material.components.tooltip'));
   beforeEach(module('material.components.button'));
-  beforeEach(inject(function(_$compile_, _$rootScope_, _$material_, _$timeout_, $mdConstant){
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$material_, _$timeout_){
     $compile   = _$compile_;
     $rootScope = _$rootScope_;
     $material  = _$material_;
     $timeout   = _$timeout_;
-    leaveEvent = $mdConstant.IS_TOUCH ? 'touchend' : 'mouseleave';
-    enterEvent = $mdConstant.IS_TOUCH ? 'touchstart' : 'mouseenter';
   }));
   afterEach(function() {
     // Make sure to remove/cleanup after each test
@@ -114,7 +112,7 @@ describe('<md-tooltip> directive', function() {
       '</outer>'
     );
 
-    triggerEvent(enterEvent, true);
+    triggerEvent('mouseenter', true);
     expect($rootScope.testModel.isVisible).toBeUndefined();
 
   }));
@@ -167,7 +165,7 @@ describe('<md-tooltip> directive', function() {
       expect(findTooltip().length).toBe(0);
     });
 
-    it('should set visible on enter and leave events', function() {
+    it('should set visible on mouseenter and mouseleave', function() {
         buildTooltip(
           '<md-button>' +
              'Hello' +
@@ -177,14 +175,31 @@ describe('<md-tooltip> directive', function() {
           '</md-button>'
         );
 
-        triggerEvent(enterEvent);
+        triggerEvent('mouseenter');
         expect($rootScope.testModel.isVisible).toBe(true);
 
-        triggerEvent(leaveEvent);
+        triggerEvent('mouseleave');
         expect($rootScope.testModel.isVisible).toBe(false);
     });
 
-    it('should cancel when the leave event was before the delay', function() {
+    it('should should toggle visibility on touch start', function() {
+        buildTooltip(
+          '<md-button>' +
+             'Hello' +
+             '<md-tooltip md-visible="testModel.isVisible">' +
+              'Tooltip' +
+            '</md-tooltip>' +
+          '</md-button>'
+        );
+
+        triggerEvent('touchstart');
+        expect($rootScope.testModel.isVisible).toBe(true);
+
+        triggerEvent('touchstart');
+        expect($rootScope.testModel.isVisible).toBe(false);
+    });
+
+    it('should cancel when mouseleave was before the delay', function() {
       buildTooltip(
         '<md-button>' +
           'Hello' +
@@ -195,10 +210,10 @@ describe('<md-tooltip> directive', function() {
       );
 
 
-      triggerEvent(enterEvent, true);
+      triggerEvent('mouseenter', true);
       expect($rootScope.testModel.isVisible).toBeFalsy();
 
-      triggerEvent(leaveEvent, true);
+      triggerEvent('mouseleave', true);
       expect($rootScope.testModel.isVisible).toBeFalsy();
 
       // Total 99 == tooltipDelay
@@ -251,7 +266,7 @@ describe('<md-tooltip> directive', function() {
       expect($rootScope.testModel.isVisible).toBe(false);
     });
 
-    it('should not be visible when a leave event fires right after a mousedown', inject(function($document) {
+    it('should not be visible on mousedown and then mouseleave', inject(function($document) {
       buildTooltip(
         '<md-button>' +
          'Hello' +
@@ -269,7 +284,7 @@ describe('<md-tooltip> directive', function() {
       expect($document[0].activeElement).toBe(element[0]);
       expect($rootScope.testModel.isVisible).toBe(true);
 
-      triggerEvent(leaveEvent);
+      triggerEvent('mouseleave');
       expect($rootScope.testModel.isVisible).toBe(false);
 
       // Clean up document.body.
@@ -292,7 +307,7 @@ describe('<md-tooltip> directive', function() {
       triggerEvent('focus,mousedown');
       expect(document.activeElement).toBe(element[0]);
 
-      triggerEvent(leaveEvent);
+      triggerEvent('mouseleave');
 
       // Simulate tabbing away.
       angular.element($window).triggerHandler('blur');

src/core/util/constant.js

@@ -34,7 +34,6 @@ function MdConstantFactory($sniffer, $window, $document) {
   }
 
   return {
-    IS_TOUCH: ('ontouchstart' in $window) || $window.DocumentTouch && $document[0] instanceof DocumentTouch,
     KEY_CODE: {
       COMMA: 188,
       SEMICOLON : 186,