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; } }