diff --git a/components/tooltip/tooltip-container.component.ts b/components/tooltip/tooltip-container.component.ts
index 6f0c0bd2f2..27471ca47f 100644
--- a/components/tooltip/tooltip-container.component.ts
+++ b/components/tooltip/tooltip-container.component.ts
@@ -2,7 +2,7 @@ import {
Component,
OnInit, Input, HostListener,
ElementRef, EventEmitter,
- DynamicComponentLoader, ComponentRef, Inject
+ DynamicComponentLoader, ComponentRef, Inject, AfterViewChecked
} from 'angular2/core';
import {NgClass, NgStyle} from 'angular2/common';
import {positionService} from '../position';
@@ -11,17 +11,16 @@ import {TooltipOptions} from './tooltip-options.class';
@Component({
selector: 'tooltip-container',
directives: [NgClass, NgStyle],
- template: `
-
`
})
-export class TooltipContainer {
+export class TooltipContainer implements AfterViewChecked {
private classMap:any;
private positionMap:any;
private top:string;
@@ -32,6 +31,7 @@ export class TooltipContainer {
private appendToBody:boolean;
private isOpen:boolean;
+ private hostEl:ElementRef;
constructor(public element:ElementRef, @Inject(TooltipOptions) options:TooltipOptions) {
Object.assign(this, options);
@@ -39,16 +39,22 @@ export class TooltipContainer {
this.classMap[options.placement] = true;
}
+ ngAfterViewChecked() {
+ if (this.hostEl !== null) {
+ let p = positionService
+ .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 = '0px';
- this.left = '0px';
- let p = positionService
- .positionElements(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;
+ this.top = '-1000px';
+ this.left = '-1000px';
+ this.hostEl = hostEl;
}
}