fix(tooltip): properly handle components using OnPush strategy

Fixes #772

Closes #777

src/tooltip/tooltip.spec.ts

@@ -2,7 +2,7 @@ import {TestBed, ComponentFixture, inject} from '@angular/core/testing';
 import {createGenericTestComponent} from '../test/common';
 
 import {By} from '@angular/platform-browser';
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
 
 import {NgbTooltipModule} from './tooltip.module';
 import {NgbTooltipWindow, NgbTooltip} from './tooltip';
@@ -11,6 +11,9 @@ import {NgbTooltipConfig} from './tooltip-config';
 const createTestComponent =
     (html: string) => <ComponentFixture<TestComponent>>createGenericTestComponent(html, TestComponent);
 
+const createOnPushTestComponent =
+    (html: string) => <ComponentFixture<TestOnPushComponent>>createGenericTestComponent(html, TestOnPushComponent);
+
 describe('ngb-tooltip-window', () => {
   beforeEach(() => { TestBed.configureTestingModule({imports: [NgbTooltipModule]}); });
 
@@ -33,7 +36,9 @@ describe('ngb-tooltip-window', () => {
 
 describe('ngb-tooltip', () => {
 
-  beforeEach(() => { TestBed.configureTestingModule({declarations: [TestComponent], imports: [NgbTooltipModule]}); });
+  beforeEach(() => {
+    TestBed.configureTestingModule({declarations: [TestComponent, TestOnPushComponent], imports: [NgbTooltipModule]});
+  });
 
   function getWindow(fixture) { return fixture.nativeElement.querySelector('ngb-tooltip-window'); }
 
@@ -160,6 +165,19 @@ describe('ngb-tooltip', () => {
         expect(windowEl).toHaveCssClass('tooltip-left');
         expect(windowEl.textContent.trim()).toBe('Great tip!');
       });
+
+      it('should properly position tooltips when a component is using the OnPush strategy', () => {
+        const fixture = createOnPushTestComponent(`<div ngbTooltip="Great tip!" placement="left"></div>`);
+        const directive = fixture.debugElement.query(By.directive(NgbTooltip));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        const windowEl = getWindow(fixture);
+
+        expect(windowEl).toHaveCssClass('tooltip');
+        expect(windowEl).toHaveCssClass('tooltip-left');
+        expect(windowEl.textContent.trim()).toBe('Great tip!');
+      });
     });
 
     describe('triggers', () => {
@@ -325,3 +343,7 @@ export class TestComponent {
 
   @ViewChild(NgbTooltip) tooltip: NgbTooltip;
 }
+
+@Component({selector: 'test-onpush-cmpt', changeDetection: ChangeDetectionStrategy.OnPush, template: ``})
+export class TestOnPushComponent {
+}

src/tooltip/tooltip.ts

@@ -89,6 +89,9 @@ export class NgbTooltip implements OnInit, OnDestroy {
     if (!this._windowRef && this._ngbTooltip) {
       this._windowRef = this._popupService.open(this._ngbTooltip);
       this._windowRef.instance.placement = this.placement;
+      // we need to manually invoke change detection since events registered via
+      // Renderer::listen() - to be determined if this is a bug in the Angular 2
+      this._windowRef.changeDetectorRef.markForCheck();
     }
   }