diff --git a/components/tooltip/tooltip-container.component.ts b/components/tooltip/tooltip-container.component.ts
index 27471ca47f..c5eca555af 100644
--- a/components/tooltip/tooltip-container.component.ts
+++ b/components/tooltip/tooltip-container.component.ts
@@ -1,8 +1,9 @@
import {
Component,
- OnInit, Input, HostListener,
- ElementRef, EventEmitter,
- DynamicComponentLoader, ComponentRef, Inject, AfterViewChecked
+ ChangeDetectorRef,
+ ChangeDetectionStrategy,
+ ElementRef,
+ Inject, AfterViewChecked
} from 'angular2/core';
import {NgClass, NgStyle} from 'angular2/common';
import {positionService} from '../position';
@@ -10,7 +11,6 @@ import {TooltipOptions} from './tooltip-options.class';
@Component({
selector: 'tooltip-container',
- directives: [NgClass, NgStyle],
template: `
`
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class TooltipContainer implements AfterViewChecked {
private classMap:any;
- private positionMap:any;
- private top:string;
- private left:string;
- private display:string;
+ private top:string = '-1000px';
+ private left:string = '-1000px';
+ private display:string = 'block';
private content:string;
private placement:string;
- private appendToBody:boolean;
-
+ private popupClass:string;
+ private animation:boolean;
private isOpen:boolean;
+ private appendToBody:boolean;
private hostEl:ElementRef;
- constructor(public element:ElementRef, @Inject(TooltipOptions) options:TooltipOptions) {
+ constructor(
+ private element:ElementRef,
+ private cdr:ChangeDetectorRef,
+ @Inject(TooltipOptions) options:TooltipOptions) {
Object.assign(this, options);
- this.classMap = {'in': false};
+ this.classMap = {'in': false, 'fade': false};
this.classMap[options.placement] = true;
}
ngAfterViewChecked() {
- if (this.hostEl !== null) {
+ setTimeout(() => {
let p = positionService
- .positionElements(this.hostEl.nativeElement,
+ .positionElements(
+ this.hostEl.nativeElement,
this.element.nativeElement.children[0],
this.placement, this.appendToBody);
this.top = p.top + 'px';
this.left = p.left + 'px';
- this.classMap['in'] = true;
- }
- }
-
- public position(hostEl:ElementRef) {
- this.display = 'block';
- this.top = '-1000px';
- this.left = '-1000px';
- this.hostEl = hostEl;
+ this.classMap.in = true;
+ if (this.animation) {
+ this.classMap.fade = true;
+ }
+ this.cdr.markForCheck();
+ });
}
}
diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
index c7f60b0df1..5e81fe8218 100644
--- a/components/tooltip/tooltip.directive.ts
+++ b/components/tooltip/tooltip.directive.ts
@@ -19,6 +19,7 @@ export class Tooltip implements OnInit {
@Input('tooltipPlacement') public placement:string = 'top';
@Input('tooltipIsOpen') public isOpen:boolean;
@Input('tooltipEnable') public enable:boolean;
+ @Input('tooltipAnimation') public animation:boolean = true;
@Input('tooltipAppendToBody') public appendToBody:boolean;
private visible:boolean = false;
@@ -43,7 +44,9 @@ export class Tooltip implements OnInit {
let options = new TooltipOptions({
content: this.content,
- placement: this.placement
+ placement: this.placement,
+ animation: this.animation,
+ hostEl: this.element
});
let binding = Injector.resolve([
@@ -53,7 +56,6 @@ export class Tooltip implements OnInit {
this.tooltip = this.loader
.loadNextToLocation(TooltipContainer, this.element, binding)
.then((componentRef:ComponentRef) => {
- componentRef.instance.position(this.element);
return componentRef;
});
}