diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 1c2b481eec6..99f38a7d16c 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -191,6 +191,18 @@ describe('MatTooltip', () => { expect(tooltipDirective._isTooltipVisible()).toBe(false); })); + it('should hide if the message is cleared while the tooltip is open', fakeAsync(() => { + tooltipDirective.show(); + fixture.detectChanges(); + tick(0); + expect(tooltipDirective._isTooltipVisible()).toBe(true); + + fixture.componentInstance.message = ''; + fixture.detectChanges(); + tick(0); + expect(tooltipDirective._isTooltipVisible()).toBe(false); + })); + it('should not show if hide is called before delay finishes', async(() => { assertTooltipInstance(tooltipDirective, false); diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 7c2a1edddf1..5fe91edfe4c 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -142,14 +142,20 @@ export class MatTooltip implements OnDestroy { private _message = ''; /** The message to be displayed in the tooltip */ - @Input('matTooltip') get message() { return this._message; } + @Input('matTooltip') + get message() { return this._message; } set message(value: string) { this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message); // If the message is not a string (e.g. number), convert it to a string and trim it. this._message = value != null ? `${value}`.trim() : ''; - this._updateTooltipMessage(); - this._ariaDescriber.describe(this._elementRef.nativeElement, this.message); + + if (!this._message && this._isTooltipVisible()) { + this.hide(0); + } else { + this._updateTooltipMessage(); + this._ariaDescriber.describe(this._elementRef.nativeElement, this.message); + } } /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */