feat(tooltip): allow for position to be updated while open (#10362)

Allows for the position of a tooltip to be updated while it's still open. Previously we closed the tooltip, because it wasn't possible for the overlay position to be updated.

Author: crisbeto

src/demo-app/tooltip/tooltip-demo.scss

@@ -5,7 +5,7 @@
     overflow: auto;
 
     button {
-      margin: 16px;
+      margin: 75px 16px 16px;
     }
   }
   .mat-radio-button {

src/lib/tooltip/tooltip.spec.ts

@@ -28,7 +28,6 @@ import {
   MatTooltipModule,
   SCROLL_THROTTLE_MS,
   TOOLTIP_PANEL_CLASS,
-  TooltipPosition,
   MAT_TOOLTIP_DEFAULT_OPTIONS,
 } from './index';
 
@@ -306,24 +305,21 @@ describe('MatTooltip', () => {
       expect(tooltipDirective._isTooltipVisible()).toBe(true);
     }));
 
-    it('should remove the tooltip when changing position', () => {
-      const initialPosition: TooltipPosition = 'below';
-      const changedPosition: TooltipPosition = 'above';
-
-      assertTooltipInstance(tooltipDirective, false);
-
-      tooltipDirective.position = initialPosition;
+    it('should be able to update the tooltip position while open', fakeAsync(() => {
+      tooltipDirective.position = 'below';
       tooltipDirective.show();
-      expect(tooltipDirective._tooltipInstance).toBeTruthy();
+      tick();
 
-      // Same position value should not remove the tooltip
-      tooltipDirective.position = initialPosition;
-      expect(tooltipDirective._tooltipInstance).toBeTruthy();
+      assertTooltipInstance(tooltipDirective, true);
 
-      // Different position value should destroy the tooltip
-      tooltipDirective.position = changedPosition;
-      assertTooltipInstance(tooltipDirective, false);
-    });
+      tooltipDirective.position = 'above';
+      spyOn(tooltipDirective._overlayRef!, 'updatePosition').and.callThrough();
+      fixture.detectChanges();
+      tick();
+
+      assertTooltipInstance(tooltipDirective, true);
+      expect(tooltipDirective._overlayRef!.updatePosition).toHaveBeenCalled();
+    }));
 
     it('should be able to modify the tooltip message', fakeAsync(() => {
       assertTooltipInstance(tooltipDirective, false);

src/lib/tooltip/tooltip.ts

@@ -119,10 +119,9 @@ export class MatTooltip implements OnDestroy {
       this._position = value;
 
       if (this._overlayRef) {
-        // TODO(andrewjs): When the overlay's position can be
-        // dynamically changed, do not destroy the tooltip.
-        this._detach();
         this._updatePosition();
+        this._tooltipInstance!.show(value, 0);
+        this._overlayRef.updatePosition();
       }
     }
   }