fix(tooltip): allow toolip to reopen when closed by detaching overlay (#8232)

Author: crisbeto

src/lib/tooltip/tooltip.spec.ts

@@ -113,6 +113,26 @@ describe('MatTooltip', () => {
       expect(tooltipDirective._tooltipInstance).toBeNull();
     }));
 
+    it('should be able to re-open a tooltip if it was closed by detaching the overlay',
+      fakeAsync(() => {
+        tooltipDirective.show();
+        tick(0);
+        expect(tooltipDirective._isTooltipVisible()).toBe(true);
+        fixture.detectChanges();
+        tick(500);
+
+        tooltipDirective._overlayRef!.detach();
+        tick(0);
+        fixture.detectChanges();
+        expect(tooltipDirective._isTooltipVisible()).toBe(false);
+        flushMicrotasks();
+        expect(tooltipDirective._tooltipInstance).toBeNull();
+
+        tooltipDirective.show();
+        tick(0);
+        expect(tooltipDirective._isTooltipVisible()).toBe(true);
+      }));
+
     it('should show with delay', fakeAsync(() => {
       expect(tooltipDirective._tooltipInstance).toBeUndefined();
 

src/lib/tooltip/tooltip.ts

@@ -255,13 +255,13 @@ export class MatTooltip implements OnDestroy {
 
   /** Create the tooltip to display */
   private _createTooltip(): void {
-    let overlayRef = this._createOverlay();
-    let portal = new ComponentPortal(TooltipComponent, this._viewContainerRef);
+    const overlayRef = this._createOverlay();
+    const portal = new ComponentPortal(TooltipComponent, this._viewContainerRef);
 
     this._tooltipInstance = overlayRef.attach(portal).instance;
 
-    // Dispose the overlay when finished the shown tooltip.
-    this._tooltipInstance!.afterHidden().subscribe(() => {
+    // Dispose of the tooltip when the overlay is detached.
+    overlayRef.detachments().subscribe(() => {
       // Check first if the tooltip has already been removed through this components destroy.
       if (this._tooltipInstance) {
         this._disposeTooltip();