fix(tooltip): fix positioning of tooltip container

valor-software · Feb 27, 2016 · 5697574 · 5697574
1 parent a80fee1
commit 5697574
Showing 1 changed file with 20 additions and 14 deletions.
diff --git 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: `
-    <div class="tooltip" role="tooltip"
+  template: `<div class="tooltip" role="tooltip"
      [ngStyle]="{top: top, left: left, display: display}"
-     [ngClass]="classMap" >
+     [ngClass]="classMap">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         {{content}}
       </div>
     </div>`
 })
-export class TooltipContainer {
+export class TooltipContainer implements AfterViewChecked {
   private classMap:any;
   private positionMap:any;
   private top:string;
@@ -32,23 +31,30 @@ export class TooltipContainer {
   private appendToBody:boolean;
 
   private isOpen:boolean;
+  private hostEl:ElementRef;
 
   constructor(public element:ElementRef, @Inject(TooltipOptions) options:TooltipOptions) {
     Object.assign(this, options);
     this.classMap = {'in': false};
     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;
   }
 }