feat(tooltip): add mdTooltipClass for customizing (#4893)

Author: willshowell

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

@@ -9,7 +9,8 @@ <h1>Tooltip Demo</h1>
             [mdTooltipPosition]="position"
             [mdTooltipDisabled]="disabled"
             [mdTooltipShowDelay]="showDelay"
-            [mdTooltipHideDelay]="hideDelay">
+            [mdTooltipHideDelay]="hideDelay"
+            [mdTooltipClass]="{'red-tooltip': showExtraClass}">
       Mouse over to see the tooltip
     </button>
     <div>Scroll down while tooltip is open to see it hide automatically</div>
@@ -60,4 +61,7 @@ <h1>Tooltip Demo</h1>
   <button md-raised-button color="primary" (mouseenter)="tooltip.toggle()">
     Toggle tooltip
   </button>
+  <button md-raised-button color="primary" (mouseenter)="showExtraClass = !showExtraClass">
+    Toggle tooltipClass
+  </button>
 </div>

src/demo-app/tooltip/tooltip-demo.scss

@@ -12,3 +12,8 @@
     display: block;
   }
 }
+
+.red-tooltip {
+  background-color: rgb(255, 128, 128);
+  color: black;
+}

src/demo-app/tooltip/tooltip-demo.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {TooltipPosition} from '@angular/material';
 
 
@@ -7,11 +7,13 @@ import {TooltipPosition} from '@angular/material';
   selector: 'tooltip-demo',
   templateUrl: 'tooltip-demo.html',
   styleUrls: ['tooltip-demo.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class TooltipDemo {
   position: TooltipPosition = 'below';
   message: string = 'Here is the tooltip';
   disabled = false;
   showDelay = 0;
   hideDelay = 1000;
+  showExtraClass = false;
 }

src/lib/tooltip/index.ts

@@ -7,13 +7,19 @@
  */
 
 import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
 import {OverlayModule, MdCommonModule} from '../core';
 import {PlatformModule} from '../core/platform/index';
 import {MdTooltip, TooltipComponent} from './tooltip';
 
 
 @NgModule({
-  imports: [OverlayModule, MdCommonModule, PlatformModule],
+  imports: [
+    CommonModule,
+    OverlayModule,
+    MdCommonModule,
+    PlatformModule
+  ],
   exports: [MdTooltip, TooltipComponent, MdCommonModule],
   declarations: [MdTooltip, TooltipComponent],
   entryComponents: [TooltipComponent],

src/lib/tooltip/tooltip.html

@@ -1,4 +1,5 @@
 <div class="mat-tooltip"
+     [ngClass]="tooltipClass"
      [style.transform-origin]="_transformOrigin"
      [@state]="_visibility"
      (@state.done)="_afterVisibilityAnimation($event)">

src/lib/tooltip/tooltip.spec.ts

@@ -240,6 +240,32 @@ describe('MdTooltip', () => {
       expect(overlayContainerElement.textContent).toContain(newMessage);
     }));
 
+    it('should allow extra classes to be set on the tooltip', fakeAsync(() => {
+      expect(tooltipDirective._tooltipInstance).toBeUndefined();
+
+      tooltipDirective.show();
+      tick(0); // Tick for the show delay (default is 0)
+      fixture.detectChanges();
+
+      // Make sure classes aren't prematurely added
+      let tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+      expect(tooltipElement.classList).not.toContain('custom-one',
+        'Expected to not have the class before enabling mdTooltipClass');
+      expect(tooltipElement.classList).not.toContain('custom-two',
+        'Expected to not have the class before enabling mdTooltipClass');
+
+      // Enable the classes via ngClass syntax
+      fixture.componentInstance.showTooltipClass = true;
+      fixture.detectChanges();
+
+      // Make sure classes are correctly added
+      tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+      expect(tooltipElement.classList).toContain('custom-one',
+        'Expected to have the class after enabling mdTooltipClass');
+      expect(tooltipElement.classList).toContain('custom-two',
+        'Expected to have the class after enabling mdTooltipClass');
+    }));
+
     it('should be removed after parent destroyed', fakeAsync(() => {
       tooltipDirective.show();
       tick(0); // Tick for the show delay (default is 0)
@@ -468,14 +494,16 @@ describe('MdTooltip', () => {
   template: `
     <button *ngIf="showButton"
             [mdTooltip]="message"
-            [mdTooltipPosition]="position">
+            [mdTooltipPosition]="position"
+            [mdTooltipClass]="{'custom-one': showTooltipClass, 'custom-two': showTooltipClass }">
       Button
     </button>`
 })
 class BasicTooltipDemo {
   position: string = 'below';
   message: string = initialTooltipMessage;
   showButton: boolean = true;
+  showTooltipClass = false;
   @ViewChild(MdTooltip) tooltip: MdTooltip;
 }
 

src/lib/tooltip/tooltip.ts

@@ -17,6 +17,7 @@ import {
   OnDestroy,
   Renderer2,
   ChangeDetectorRef,
+  ViewEncapsulation,
 } from '@angular/core';
 import {
   style,
@@ -75,6 +76,7 @@ export class MdTooltip implements OnDestroy {
 
   private _position: TooltipPosition = 'below';
   private _disabled: boolean = false;
+  private _tooltipClass: string|string[]|Set<string>|{[key: string]: any};
 
   /** Allows the user to define the position of the tooltip relative to the parent element */
   @Input('mdTooltipPosition')
@@ -125,6 +127,16 @@ export class MdTooltip implements OnDestroy {
     }
   }
 
+  /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
+  @Input('mdTooltipClass')
+  get tooltipClass() { return this._tooltipClass; }
+  set tooltipClass(value: string|string[]|Set<string>|{[key: string]: any}) {
+    this._tooltipClass = value;
+    if (this._tooltipInstance) {
+      this._setTooltipClass(this._tooltipClass);
+    }
+  }
+
   /** @deprecated */
   @Input('md-tooltip')
   get _deprecatedMessage(): string { return this.message; }
@@ -155,6 +167,11 @@ export class MdTooltip implements OnDestroy {
   get _matShowDelay() { return this.showDelay; }
   set _matShowDelay(v) { this.showDelay = v; }
 
+  // Properties with `mat-` prefix for nonconflict mode.
+  @Input('matTooltipClass')
+  get _matClass() { return this.tooltipClass; }
+  set _matClass(v) { this.tooltipClass = v; }
+
   constructor(
     private _overlay: Overlay,
     private _elementRef: ElementRef,
@@ -190,6 +207,7 @@ export class MdTooltip implements OnDestroy {
       this._createTooltip();
     }
 
+    this._setTooltipClass(this._tooltipClass);
     this._setTooltipMessage(this._message);
     this._tooltipInstance.show(this._position, delay);
   }
@@ -322,6 +340,12 @@ export class MdTooltip implements OnDestroy {
       }
     });
   }
+
+  /** Updates the tooltip class */
+  private _setTooltipClass(tooltipClass: string|string[]|Set<string>|{[key: string]: any}) {
+    this._tooltipInstance.tooltipClass = tooltipClass;
+    this._tooltipInstance._markForCheck();
+  }
 }
 
 export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
@@ -335,6 +359,7 @@ export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
   selector: 'md-tooltip-component, mat-tooltip-component',
   templateUrl: 'tooltip.html',
   styleUrls: ['tooltip.css'],
+  encapsulation: ViewEncapsulation.None,
   animations: [
     trigger('state', [
       state('void', style({transform: 'scale(0)'})),
@@ -356,6 +381,9 @@ export class TooltipComponent {
   /** Message to display in the tooltip */
   message: string;
 
+  /** Classes to be added to the tooltip. Supports the same syntax as `ngClass`. */
+  tooltipClass: string|string[]|Set<string>|{[key: string]: any};
+
   /** The timeout ID of any current timer set to show the tooltip */
   _showTimeoutId: number;