feat(tooltip): allow tooltip be disabled (#3578)

* feat(tooltip): allow tooltip be disabled

* hide if disabled while shown

Author: andrewseguin

src/demo-app/tooltip/tooltip-demo.html

@@ -7,6 +7,7 @@ <h1>Tooltip Demo</h1>
             color="primary"
             [mdTooltip]="message"
             [mdTooltipPosition]="position"
+            [mdTooltipDisabled]="disabled"
             [mdTooltipShowDelay]="showDelay"
             [mdTooltipHideDelay]="hideDelay">
       Mouse over to see the tooltip
@@ -25,12 +26,16 @@ <h1>Tooltip Demo</h1>
       <md-radio-button value="after">After</md-radio-button>
     </md-radio-group>
   </p>
-
   <p>
     <strong>Message: </strong>
     <md-input-container><input mdInput type="text" [(ngModel)]="message"></md-input-container>
   </p>
 
+  <p>
+    <strong>Disabled: </strong>
+    <md-checkbox [(ngModel)]="disabled"></md-checkbox>
+  </p>
+
   <p>
     <strong>Show Delay (ms): </strong>
     <md-input-container>

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;
 }

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.
+

src/lib/tooltip/tooltip.spec.ts

@@ -112,6 +112,37 @@ describe('MdTooltip', () => {
       expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
     }));
 
+    it('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 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();
 

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,18 @@ 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);
+
+    // If tooltip is disabled, hide immediately.
+    if (this._disabled) {
+      this.hide(0);
+    }
+  }
+
   /** @deprecated */
   @Input('tooltip-position')
   get _positionDeprecated(): TooltipPosition { return this._position; }
@@ -115,6 +129,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 +187,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 +211,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 */