From cd09dfce3d80b18da88805703e26a79e23f4ece0 Mon Sep 17 00:00:00 2001
From: Peter Blazejewicz <peterblazejewicz@users.noreply.github.com>
Date: Tue, 24 Sep 2019 20:41:10 +0200
Subject: [PATCH 1/2] fix(tooltip): implement change detection

This fixes issues with custom tooltip class changes  not being applied after
tooltip creation.

Fixes: #3335
---
 src/tooltip/tooltip.spec.ts | 10 +++++-----
 src/tooltip/tooltip.ts      | 12 ++++++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
index b0288608e3..6b6a4f97b6 100644
--- a/src/tooltip/tooltip.spec.ts
+++ b/src/tooltip/tooltip.spec.ts
@@ -3,12 +3,13 @@ import {createGenericTestComponent, createKeyEvent, triggerEvent} from '../test/
 
 import {By} from '@angular/platform-browser';
 import {
-  Component,
-  ViewChild,
+  AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
   TemplateRef,
-  ViewContainerRef,
-  AfterViewInit
+  ViewChild,
+  ViewContainerRef
 } from '@angular/core';
 
 import {Key} from '../util/key';
@@ -59,7 +60,6 @@ describe('ngb-tooltip-window', () => {
 
     expect(fixture.nativeElement).toHaveCssClass('my-custom-class');
   });
-
 });
 
 describe('ngb-tooltip', () => {
diff --git a/src/tooltip/tooltip.ts b/src/tooltip/tooltip.ts
index 093d6af663..154fba2b23 100644
--- a/src/tooltip/tooltip.ts
+++ b/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

From 4feb165d6fcef9f10764c0a9357fbe0733d4dcef Mon Sep 17 00:00:00 2001
From: Max Okorokov <max@okorokov.com>
Date: Mon, 21 Oct 2019 11:39:51 +0200
Subject: [PATCH 2/2] test(tooltip): add 'tooltipClass' change test

---
 src/tooltip/tooltip.spec.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
index 6b6a4f97b6..442db21b26 100644
--- a/src/tooltip/tooltip.spec.ts
+++ b/src/tooltip/tooltip.spec.ts
@@ -5,7 +5,6 @@ import {By} from '@angular/platform-browser';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   TemplateRef,
   ViewChild,
@@ -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;