fix(tooltip): hide, or avoid opening the tooltip if its value is falsy

fix #737 Closes #745
ng-bootstrap · Sep 16, 2016 · 31a035b · 31a035b
1 parent d1492b7
commit 31a035b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
@@ -76,6 +76,30 @@ describe('ngb-tooltip', () => {
       expect(getWindow(fixture)).toBeNull();
     });
 
+    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));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture);
+
+      expect(windowEl).toBeNull();
+    });
+
+    it('should close the tooltip tooltip if content becomes falsy', () => {
+      const fixture = createTestComponent(`<div [ngbTooltip]="name"></div>`);
+      const directive = fixture.debugElement.query(By.directive(NgbTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture)).not.toBeNull();
+
+      fixture.componentInstance.name = null;
+      fixture.detectChanges();
+      expect(getWindow(fixture)).toBeNull();
+    });
+
     it('should allow re-opening previously closed tooltips', () => {
       const fixture = createTestComponent(`<div ngbTooltip="Great tip!"></div>`);
       const directive = fixture.debugElement.query(By.directive(NgbTooltip));

diff --git a/src/tooltip/tooltip.ts b/src/tooltip/tooltip.ts
@@ -38,10 +38,6 @@ export class NgbTooltipWindow {
  */
 @Directive({selector: '[ngbTooltip]', exportAs: 'ngbTooltip'})
 export class NgbTooltip implements OnInit, OnDestroy {
-  /**
-   * Content to be displayed as tooltip.
-   */
-  @Input() ngbTooltip: string | TemplateRef<any>;
   /**
    * Placement of a tooltip. Accepts: "top", "bottom", "left", "right"
    */
@@ -51,6 +47,7 @@ export class NgbTooltip implements OnInit, OnDestroy {
    */
   @Input() triggers: string;
 
+  private _ngbTooltip: string | TemplateRef<any>;
   private _popupService: PopupService<NgbTooltipWindow>;
   private _windowRef: ComponentRef<NgbTooltipWindow>;
   private _unregisterListenersFn;
@@ -72,12 +69,25 @@ export class NgbTooltip implements OnInit, OnDestroy {
     });
   }
 
+  /**
+   * Content to be displayed as tooltip. If falsy, the tooltip won't open.
+   */
+  @Input()
+  set ngbTooltip(value: string | TemplateRef<any>) {
+    this._ngbTooltip = value;
+    if (!value && this._windowRef) {
+      this.close();
+    }
+  }
+
+  get ngbTooltip() { return this._ngbTooltip; }
+
   /**
    * Opens an element’s tooltip. This is considered a “manual” triggering of the tooltip.
    */
   open() {
-    if (!this._windowRef) {
-      this._windowRef = this._popupService.open(this.ngbTooltip);
+    if (!this._windowRef && this._ngbTooltip) {
+      this._windowRef = this._popupService.open(this._ngbTooltip);
       this._windowRef.instance.placement = this.placement;
     }
   }