diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/demo-app/tooltip/tooltip-demo.html index ce799b886400..8db4c5861ff9 100644 --- a/src/demo-app/tooltip/tooltip-demo.html +++ b/src/demo-app/tooltip/tooltip-demo.html @@ -9,7 +9,8 @@

Tooltip Demo

[mdTooltipPosition]="position" [mdTooltipDisabled]="disabled" [mdTooltipShowDelay]="showDelay" - [mdTooltipHideDelay]="hideDelay"> + [mdTooltipHideDelay]="hideDelay" + [mdTooltipClass]="{'red-tooltip': showExtraClass}"> Mouse over to see the tooltip
Scroll down while tooltip is open to see it hide automatically
@@ -60,4 +61,7 @@

Tooltip Demo

+ diff --git a/src/demo-app/tooltip/tooltip-demo.scss b/src/demo-app/tooltip/tooltip-demo.scss index c2483c856273..e76bfadce799 100644 --- a/src/demo-app/tooltip/tooltip-demo.scss +++ b/src/demo-app/tooltip/tooltip-demo.scss @@ -12,3 +12,8 @@ display: block; } } + +.red-tooltip { + background-color: rgb(255, 128, 128); + color: black; +} diff --git a/src/demo-app/tooltip/tooltip-demo.ts b/src/demo-app/tooltip/tooltip-demo.ts index a0c9d3213c32..44801dd490f3 100644 --- a/src/demo-app/tooltip/tooltip-demo.ts +++ b/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,6 +7,7 @@ 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'; @@ -14,4 +15,5 @@ export class TooltipDemo { disabled = false; showDelay = 0; hideDelay = 1000; + showExtraClass = false; } diff --git a/src/lib/tooltip/index.ts b/src/lib/tooltip/index.ts index 968a4334c6fa..3645a1732c5d 100644 --- a/src/lib/tooltip/index.ts +++ b/src/lib/tooltip/index.ts @@ -1,11 +1,17 @@ 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], diff --git a/src/lib/tooltip/tooltip.html b/src/lib/tooltip/tooltip.html index f4fdd8ff1160..0b1a085e4f5a 100644 --- a/src/lib/tooltip/tooltip.html +++ b/src/lib/tooltip/tooltip.html @@ -1,4 +1,5 @@
diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 8e5dc8a3a333..2a521f818eec 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/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,7 +494,8 @@ describe('MdTooltip', () => { template: ` ` }) @@ -476,6 +503,7 @@ class BasicTooltipDemo { position: string = 'below'; message: string = initialTooltipMessage; showButton: boolean = true; + showTooltipClass = false; @ViewChild(MdTooltip) tooltip: MdTooltip; } diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index e32e1cb8d589..91af8aadb416 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -9,6 +9,7 @@ import { OnDestroy, Renderer2, ChangeDetectorRef, + ViewEncapsulation, } from '@angular/core'; import { style, @@ -68,6 +69,7 @@ export class MdTooltip implements OnDestroy { private _position: TooltipPosition = 'below'; private _disabled: boolean = false; + private _tooltipClass: string|string[]|Set|{[key: string]: any}; /** Allows the user to define the position of the tooltip relative to the parent element */ @Input('mdTooltipPosition') @@ -118,6 +120,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|{[key: string]: any}) { + this._tooltipClass = value; + if (this._tooltipInstance) { + this._setTooltipClass(this._tooltipClass); + } + } + /** @deprecated */ @Input('md-tooltip') get _deprecatedMessage(): string { return this.message; } @@ -148,6 +160,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, @@ -183,6 +200,7 @@ export class MdTooltip implements OnDestroy { this._createTooltip(); } + this._setTooltipClass(this._tooltipClass); this._setTooltipMessage(this._message); this._tooltipInstance.show(this._position, delay); } @@ -313,6 +331,12 @@ export class MdTooltip implements OnDestroy { } }); } + + /** Updates the tooltip class */ + private _setTooltipClass(tooltipClass: string|string[]|Set|{[key: string]: any}) { + this._tooltipInstance.tooltipClass = tooltipClass; + this._tooltipInstance._markForCheck(); + } } export type TooltipVisibility = 'initial' | 'visible' | 'hidden'; @@ -326,6 +350,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)'})), @@ -344,6 +369,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|{[key: string]: any}; + /** The timeout ID of any current timer set to show the tooltip */ _showTimeoutId: number;