Fix tooltip after upgrade to angular2 2.0.0-beta.12

components/tooltip/tooltip-container.component.ts

@@ -1,60 +1,62 @@
 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';
 import {TooltipOptions} from './tooltip-options.class';
 
 @Component({
   selector: 'tooltip-container',
-  directives: [NgClass, NgStyle],
   template: `<div class="tooltip" role="tooltip"
      [ngStyle]="{top: top, left: left, display: display}"
      [ngClass]="classMap">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         {{content}}
       </div>
-    </div>`
+    </div>`,
+  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();
+    });
   }
 }

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