feat(tooltip): show tooltip on longpress; remove delay on mouseleave (#1819)

Author: andrewseguin

src/lib/tooltip/tooltip.spec.ts

@@ -1,10 +1,14 @@
 import {
-    async, ComponentFixture, TestBed, tick, fakeAsync,
+    async,
+    ComponentFixture,
+    TestBed,
+    tick,
+    fakeAsync,
     flushMicrotasks
 } from '@angular/core/testing';
 import {Component, DebugElement, AnimationTransitionEvent} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {TooltipPosition, MdTooltip, TOOLTIP_HIDE_DELAY, MdTooltipModule} from './tooltip';
+import {TooltipPosition, MdTooltip, MdTooltipModule} from './tooltip';
 import {OverlayContainer} from '../core';
 
 const initialTooltipMessage = 'initial tooltip message';
@@ -52,11 +56,12 @@ describe('MdTooltip', () => {
       expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
 
       // After hide called, a timeout delay is created that will to hide the tooltip.
-      tooltipDirective.hide();
+      const tooltipDelay = 1000;
+      tooltipDirective.hide(tooltipDelay);
       expect(tooltipDirective._isTooltipVisible()).toBe(true);
 
       // After the tooltip delay elapses, expect that the tooltip is not visible.
-      tick(TOOLTIP_HIDE_DELAY);
+      tick(tooltipDelay);
       fixture.detectChanges();
       expect(tooltipDirective._isTooltipVisible()).toBe(false);
 
@@ -70,12 +75,13 @@ describe('MdTooltip', () => {
       expect(tooltipDirective._isTooltipVisible()).toBe(true);
 
       // After hide called, a timeout delay is created that will to hide the tooltip.
-      tooltipDirective.hide();
+      const tooltipDelay = 1000;
+      tooltipDirective.hide(tooltipDelay);
       expect(tooltipDirective._isTooltipVisible()).toBe(true);
 
       // Before delay time has passed, call show which should cancel intent to hide tooltip.
       tooltipDirective.show();
-      tick(TOOLTIP_HIDE_DELAY);
+      tick(tooltipDelay);
       expect(tooltipDirective._isTooltipVisible()).toBe(true);
     }));
 

src/lib/tooltip/tooltip.ts

@@ -30,7 +30,7 @@ import {Subject} from 'rxjs/Subject';
 export type TooltipPosition = 'before' | 'after' | 'above' | 'below';
 
 /** Time in ms to delay before changing the tooltip visibility to hidden */
-export const TOOLTIP_HIDE_DELAY  = 1500;
+export const TOUCHEND_HIDE_DELAY  = 1500;
 
 /**
  * Directive that attaches a material design tooltip to the host element. Animates the showing and
@@ -41,6 +41,8 @@ export const TOOLTIP_HIDE_DELAY  = 1500;
 @Directive({
   selector: '[md-tooltip]',
   host: {
+    '(longpress)': 'show()',
+    '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
     '(mouseenter)': 'show()',
     '(mouseleave)': 'hide()',
   },
@@ -100,12 +102,8 @@ export class MdTooltip {
     this._tooltipInstance.show(this._position);
   }
 
-  /**
-   * Create the overlay config and position strategy
-   * Hides the tooltip after the provided delay in ms. Defaults the delay to the material design
-   * prescribed delay time
-   */
-  hide(delay: number = TOOLTIP_HIDE_DELAY): void {
+  /** Hides the tooltip after the provided delay in ms, defaulting to 0ms. */
+  hide(delay = 0): void {
     if (this._tooltipInstance) {
       this._tooltipInstance.hide(delay);
     }