diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index e5c9d2910b36..ed543648ca51 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/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); })); diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 1d12825301b5..c08dc93a3a7f 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/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); }