From d2b22db9dcb55008c2fe7384c83e85355fc8fe65 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 13 Mar 2017 11:30:41 -0700 Subject: [PATCH 1/2] feat(tooltip): allow tooltip be disabled --- src/demo-app/tooltip/tooltip-demo.html | 7 ++++++- src/demo-app/tooltip/tooltip-demo.ts | 1 + src/lib/tooltip/tooltip.md | 2 ++ src/lib/tooltip/tooltip.spec.ts | 17 +++++++++++++++++ src/lib/tooltip/tooltip.ts | 16 ++++++++++++++-- 5 files changed, 40 insertions(+), 3 deletions(-) diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/demo-app/tooltip/tooltip-demo.html index 15025d7a1df3..ce799b886400 100644 --- a/src/demo-app/tooltip/tooltip-demo.html +++ b/src/demo-app/tooltip/tooltip-demo.html @@ -7,6 +7,7 @@

Tooltip Demo

color="primary" [mdTooltip]="message" [mdTooltipPosition]="position" + [mdTooltipDisabled]="disabled" [mdTooltipShowDelay]="showDelay" [mdTooltipHideDelay]="hideDelay"> Mouse over to see the tooltip @@ -25,12 +26,16 @@

Tooltip Demo

After

-

Message:

+

+ Disabled: + +

+

Show Delay (ms): diff --git a/src/demo-app/tooltip/tooltip-demo.ts b/src/demo-app/tooltip/tooltip-demo.ts index 96a59b7e53cb..d91bf118d70d 100644 --- a/src/demo-app/tooltip/tooltip-demo.ts +++ b/src/demo-app/tooltip/tooltip-demo.ts @@ -12,6 +12,7 @@ import {TooltipPosition} from '@angular/material'; export class TooltipDemo { position: TooltipPosition = 'below'; message: string = 'Here is the tooltip'; + disabled = false; showDelay = 0; hideDelay = 1000; } diff --git a/src/lib/tooltip/tooltip.md b/src/lib/tooltip/tooltip.md index 80ec3cc8c36e..41c25ee8a912 100644 --- a/src/lib/tooltip/tooltip.md +++ b/src/lib/tooltip/tooltip.md @@ -33,3 +33,5 @@ delay of 1500ms. The longpress behavior requires HammerJS to be loaded on the pa The tooltip can also be shown and hidden through the `show` and `hide` directive methods, which both accept a number in milliseconds to delay before applying the display change. +To turn off the tooltip and prevent it from showing to the user, use the `mdTooltipDisabled` input flag. + diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 9700e755fc21..083499700091 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -112,6 +112,23 @@ describe('MdTooltip', () => { expect(overlayContainerElement.textContent).toContain(initialTooltipMessage); })); + fit('should not show if disabled', fakeAsync(() => { + // Test that disabling the tooltip will not set the tooltip visible + tooltipDirective.disabled = true; + tooltipDirective.show(); + fixture.detectChanges(); + tick(0); + expect(tooltipDirective._isTooltipVisible()).toBe(false); + + // Test to make sure setting disabled to false will show the tooltip + // Sanity check to make sure everything was correct before (detectChanges, tick) + tooltipDirective.disabled = false; + tooltipDirective.show(); + fixture.detectChanges(); + tick(0); + expect(tooltipDirective._isTooltipVisible()).toBe(true); + })); + it('should not show if hide is called before delay finishes', fakeAsync(() => { expect(tooltipDirective._tooltipInstance).toBeUndefined(); diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index ded39bf7ae44..38a5e526955c 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -33,6 +33,7 @@ import {Platform} from '../core/platform/index'; import 'rxjs/add/operator/first'; import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher'; import {Subscription} from 'rxjs/Subscription'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after'; @@ -62,6 +63,7 @@ export class MdTooltip implements OnInit, OnDestroy { scrollSubscription: Subscription; private _position: TooltipPosition = 'below'; + private _disabled: boolean = false; /** Allows the user to define the position of the tooltip relative to the parent element */ @Input('mdTooltipPosition') @@ -78,6 +80,11 @@ export class MdTooltip implements OnInit, OnDestroy { } } + /** Disables the display of the tooltip. */ + @Input('mdTooltipDisabled') + get disabled(): boolean { return this._disabled; } + set disabled(value) { this._disabled = coerceBooleanProperty(value); } + /** @deprecated */ @Input('tooltip-position') get _positionDeprecated(): TooltipPosition { return this._position; } @@ -115,6 +122,11 @@ export class MdTooltip implements OnInit, OnDestroy { get _matPosition() { return this.position; } set _matPosition(v) { this.position = v; } + // Properties with `mat-` prefix for noconflict mode. + @Input('matTooltipDisabled') + get _matDisabled() { return this.disabled; } + set _matDisabled(v) { this.disabled = v; } + // Properties with `mat-` prefix for noconflict mode. @Input('matTooltipHideDelay') get _matHideDelay() { return this.hideDelay; } @@ -168,7 +180,7 @@ export class MdTooltip implements OnInit, OnDestroy { /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */ show(delay: number = this.showDelay): void { - if (!this._message || !this._message.trim()) { return; } + if (this.disabled || !this._message || !this._message.trim()) { return; } if (!this._tooltipInstance) { this._createTooltip(); @@ -192,7 +204,7 @@ export class MdTooltip implements OnInit, OnDestroy { /** Returns true if the tooltip is currently visible to the user */ _isTooltipVisible(): boolean { - return this._tooltipInstance && this._tooltipInstance.isVisible(); + return !!this._tooltipInstance && this._tooltipInstance.isVisible(); } /** Create the tooltip to display */ From ea9a991ff54f0e87ea6059af6da9eced08edd580 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 14 Mar 2017 13:02:22 -0700 Subject: [PATCH 2/2] hide if disabled while shown --- src/lib/tooltip/tooltip.spec.ts | 16 +++++++++++++++- src/lib/tooltip/tooltip.ts | 9 ++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 083499700091..a5e3cc932c7d 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -112,7 +112,7 @@ describe('MdTooltip', () => { expect(overlayContainerElement.textContent).toContain(initialTooltipMessage); })); - fit('should not show if disabled', fakeAsync(() => { + it('should not show if disabled', fakeAsync(() => { // Test that disabling the tooltip will not set the tooltip visible tooltipDirective.disabled = true; tooltipDirective.show(); @@ -129,6 +129,20 @@ describe('MdTooltip', () => { expect(tooltipDirective._isTooltipVisible()).toBe(true); })); + it('should hide if disabled while visible', fakeAsync(() => { + // Display the tooltip with a timeout before hiding. + tooltipDirective.hideDelay = 1000; + tooltipDirective.show(); + fixture.detectChanges(); + tick(0); + expect(tooltipDirective._isTooltipVisible()).toBe(true); + + // Set tooltip to be disabled and verify that the tooltip hides. + tooltipDirective.disabled = true; + tick(0); + expect(tooltipDirective._isTooltipVisible()).toBe(false); + })); + it('should not show if hide is called before delay finishes', fakeAsync(() => { expect(tooltipDirective._tooltipInstance).toBeUndefined(); diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 38a5e526955c..cc13061eb92c 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -83,7 +83,14 @@ export class MdTooltip implements OnInit, OnDestroy { /** Disables the display of the tooltip. */ @Input('mdTooltipDisabled') get disabled(): boolean { return this._disabled; } - set disabled(value) { this._disabled = coerceBooleanProperty(value); } + set disabled(value) { + this._disabled = coerceBooleanProperty(value); + + // If tooltip is disabled, hide immediately. + if (this._disabled) { + this.hide(0); + } + } /** @deprecated */ @Input('tooltip-position')