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
Toggle tooltip
+
+ Toggle tooltipClass
+
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: `
+ [mdTooltipPosition]="position"
+ [mdTooltipClass]="{'custom-one': showTooltipClass, 'custom-two': showTooltipClass }">
Button
`
})
@@ -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;