diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts index b0288608e3..442db21b26 100644 --- a/src/tooltip/tooltip.spec.ts +++ b/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(`
`); + 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(`
`); 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; 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