fix(tooltip): cancel show timeouts when leaving before delay.

* When a user hovers over a tooltip, which has a delay, and we're leaving the tooltips parent before the delay is finished, then we're detaching all leave handlers, which is not valid.
  We should cancel the show timeout, when the leave occurs before the delay.

Fixes #8363.

Closes #8394

Author: devversion

src/components/tooltip/tooltip.js

@@ -59,6 +59,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
     var parent        = $mdUtil.getParentWithPointerEvents(element),
         content       = angular.element(element[0].getElementsByClassName('_md-content')[0]),
         tooltipParent = angular.element(document.body),
+        showTimeout   = null,
         debouncedOnResize = $$rAF.throttle(function () { updatePosition(); });
 
     if ($animate.pin) $animate.pin(element, parent);
@@ -194,7 +195,17 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
       };
       var leaveHandler = function () {
         var autohide = scope.hasOwnProperty('autohide') ? scope.autohide : attr.hasOwnProperty('mdAutohide');
+
         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) {
+            $timeout.cancel(showTimeout);
+            setVisible.queued = false;
+            showTimeout = null;
+          }
+
           parent.off('blur mouseleave touchend touchcancel', leaveHandler );
           parent.triggerHandler("blur");
           setVisible(false);
@@ -214,14 +225,18 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
       if (setVisible.queued && setVisible.visible === !!value || scope.visible === !!value) return;
 
       setVisible.value = !!value;
+
       if (!setVisible.queued) {
         if (value) {
           setVisible.queued = true;
-          $timeout(function() {
+          showTimeout = $timeout(function() {
             scope.visible = setVisible.value;
             setVisible.queued = false;
-            if (!scope.visibleWatcher)
+            showTimeout = null;
+
+            if (!scope.visibleWatcher) {
               onVisibleChanged(scope.visible);
+            }
           }, scope.delay);
         } else {
           $mdUtil.nextTick(function() { 

src/components/tooltip/tooltip.spec.js

@@ -141,6 +141,29 @@ describe('<md-tooltip> directive', function() {
         expect($rootScope.testModel.isVisible).toBe(false);
     });
 
+    it('should cancel when mouseleave was before the delay', function() {
+      buildTooltip(
+        '<md-button>' +
+          'Hello' +
+          '<md-tooltip md-delay="99" md-autohide md-visible="testModel.isVisible">' +
+            'Tooltip' +
+          '</md-tooltip>' +
+        '</md-button>'
+      );
+
+
+      triggerEvent('mouseenter', true);
+      expect($rootScope.testModel.isVisible).toBeFalsy();
+
+      triggerEvent('mouseleave', true);
+      expect($rootScope.testModel.isVisible).toBeFalsy();
+
+      // Total 99 == tooltipDelay
+      $timeout.flush(99);
+
+      expect($rootScope.testModel.isVisible).toBe(false);
+    });
+
     it('should set visible on focus and blur', function() {
       buildTooltip(
         '<md-button>' +