fix(tooltip): implement change detection

src/tooltip/tooltip.spec.ts

@@ -3,12 +3,12 @@ import {createGenericTestComponent, createKeyEvent, triggerEvent} from '../test/
 
 import {By} from '@angular/platform-browser';
 import {
-  Component,
-  ViewChild,
+  AfterViewInit,
   ChangeDetectionStrategy,
+  Component,
   TemplateRef,
-  ViewContainerRef,
-  AfterViewInit
+  ViewChild,
+  ViewContainerRef
 } from '@angular/core';
 
 import {Key} from '../util/key';
@@ -59,7 +59,6 @@ describe('ngb-tooltip-window', () => {
 
     expect(fixture.nativeElement).toHaveCssClass('my-custom-class');
   });
-
 });
 
 describe('ngb-tooltip', () => {
@@ -165,6 +164,21 @@ describe('ngb-tooltip', () => {
       expect(directive.nativeElement.getAttribute('aria-describedby')).toBeNull();
     });
 
+    it('should propagate tooltipClass changes to the window', () => {
+      const fixture = createTestComponent(`<div ngbTooltip="Great tip!" [tooltipClass]="tooltipClass"></div>`);
+      const directive = fixture.debugElement.query(By.directive(NgbTooltip));
+
+      triggerEvent(directive, 'mouseenter');
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+      expect(windowEl).toHaveCssClass('my-tooltip-class');
+
+      fixture.componentInstance.tooltipClass = 'my-tooltip-class-2';
+      fixture.detectChanges();
+      expect(windowEl).not.toHaveCssClass('my-tooltip-class');
+      expect(windowEl).toHaveCssClass('my-tooltip-class-2');
+    });
+
     it('should not open a tooltip if content is falsy', () => {
       const fixture = createTestComponent(`<div [ngbTooltip]="notExisting"></div>`);
       const directive = fixture.debugElement.query(By.directive(NgbTooltip));
@@ -638,6 +652,7 @@ describe('ngb-tooltip', () => {
 export class TestComponent {
   name = 'World';
   show = true;
+  tooltipClass = 'my-tooltip-class';
 
   @ViewChild(NgbTooltip, {static: true}) tooltip: NgbTooltip;
 

src/tooltip/tooltip.ts

@@ -18,7 +18,9 @@ import {
   NgZone,
   ViewEncapsulation,
   ChangeDetectorRef,
-  ApplicationRef
+  ApplicationRef,
+  OnChanges,
+  SimpleChanges
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
@@ -48,7 +50,7 @@ export class NgbTooltipWindow {
  * A lightweight and extensible directive for fancy tooltip creation.
  */
 @Directive({selector: '[ngbTooltip]', exportAs: 'ngbTooltip'})
-export class NgbTooltip implements OnInit, OnDestroy {
+export class NgbTooltip implements OnInit, OnDestroy, OnChanges {
   /**
    * Indicates whether the tooltip should be closed on `Escape` key and inside/outside clicks:
    *
@@ -253,6 +255,12 @@ export class NgbTooltip implements OnInit, OnDestroy {
         this.close.bind(this), +this.openDelay, +this.closeDelay);
   }
 
+  ngOnChanges({tooltipClass}: SimpleChanges) {
+    if (tooltipClass && this.isOpen()) {
+      this._windowRef.instance.tooltipClass = tooltipClass.currentValue;
+    }
+  }
+
   ngOnDestroy() {
     this.close();
     // This check is needed as it might happen that ngOnDestroy is called before ngOnInit