@ng-matero/extensions 15.4.2 → 15.5.0

package/fesm2020/mtxTooltip.mjs

@@ -1,57 +1,28 @@
-import * as i4 from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { InjectionToken, TemplateRef, ElementRef, Directive, Inject, Input, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import * as i5 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i3 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
-import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import * as i7 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { InjectionToken, TemplateRef, Directive, Inject, Optional, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { MatCommonModule } from '@angular/material/core';
-import * as i8 from '@ng-matero/extensions/core';
+import * as i6 from '@ng-matero/extensions/core';
 import { MtxPipesModule } from '@ng-matero/extensions/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import * as i6 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
-import * as i3 from '@angular/cdk/platform';
+import * as i2 from '@angular/cdk/platform';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { Subject } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
-import * as i5 from '@angular/cdk/bidi';
-
-/**
- * Animations used by MtxTooltip.
- * @docs-private
- */
-const mtxTooltipAnimations = {
-    /** Animation that transitions a tooltip in and out. */
-    tooltipState: trigger('state', [
-        state('initial, void, hidden', style({ opacity: 0, transform: 'scale(0)' })),
-        state('visible', style({ transform: 'scale(1)' })),
-        transition('* => visible', animate('200ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
-            style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
-            style({ opacity: 0.5, transform: 'scale(0.99)', offset: 0.5 }),
-            style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
-        ]))),
-        transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0 }))),
-    ]),
-};
+import * as i4 from '@angular/cdk/bidi';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 /** Time in ms to throttle repositioning after scroll events. */
 const SCROLL_THROTTLE_MS = 20;
-/** CSS class that will be attached to the overlay panel. */
-const TOOLTIP_PANEL_CLASS = 'mtx-tooltip-panel';
-/** Options used to bind passive event listeners. */
-const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
-/**
- * Time between the user putting the pointer on a tooltip
- * trigger and the long press event being fired.
- */
-const LONGPRESS_DELAY = 500;
 /**
  * Creates an error to be thrown if the user supplied an invalid tooltip position.
  * @docs-private
@@ -71,11 +42,6 @@ const MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     deps: [Overlay],
     useFactory: MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY,
 };
-/** Injection token to be used to override the default options for `matTooltip`. */
-const MTX_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken('mtx-tooltip-default-options', {
-    providedIn: 'root',
-    factory: MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
-});
 /** @docs-private */
 function MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY() {
     return {
@@ -84,13 +50,32 @@ function MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY() {
         touchendHideDelay: 1500,
     };
 }
+/** Injection token to be used to override the default options for `mtxTooltip`. */
+const MTX_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken('mtx-tooltip-default-options', {
+    providedIn: 'root',
+    factory: MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
+});
 /**
- * Directive that attaches a material design tooltip to the host element. Animates the showing and
- * hiding of a tooltip provided position (defaults to below the element).
- *
- * https://material.io/design/components/tooltips.html
+ * CSS class that will be attached to the overlay panel.
+ * @deprecated
+ * @breaking-change 13.0.0 remove this variable
+ */
+const TOOLTIP_PANEL_CLASS = 'mtx-mdc-tooltip-panel';
+const PANEL_CLASS = 'tooltip-panel';
+/** Options used to bind passive event listeners. */
+const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
+/**
+ * Time between the user putting the pointer on a tooltip
+ * trigger and the long press event being fired.
  */
-class MtxTooltip {
+const LONGPRESS_DELAY = 500;
+// These constants were taken from MDC's `numbers` object. We can't import them from MDC,
+// because they have some top-level references to `window` which break during SSR.
+const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
+const UNBOUNDED_ANCHOR_GAP = 8;
+const MIN_HEIGHT = 24;
+const MAX_WIDTH = 200;
+class _MtxTooltipBase {
     /** Allows the user to define the position of the tooltip relative to the parent element */
     get position() {
         return this._position;
@@ -99,14 +84,20 @@ class MtxTooltip {
         if (value !== this._position) {
             this._position = value;
             if (this._overlayRef) {
-                this._updatePosition();
-                if (this._tooltipInstance) {
-                    this._tooltipInstance.show(0);
-                }
+                this._updatePosition(this._overlayRef);
+                this._tooltipInstance?.show(0);
                 this._overlayRef.updatePosition();
             }
         }
     }
+    get positionAtOrigin() {
+        return this._positionAtOrigin;
+    }
+    set positionAtOrigin(value) {
+        this._positionAtOrigin = coerceBooleanProperty(value);
+        this._detach();
+        this._overlayRef = null;
+    }
     /** Disables the display of the tooltip. */
     get disabled() {
         return this._disabled;
@@ -121,14 +112,33 @@ class MtxTooltip {
             this._setupPointerEnterEventsIfNeeded();
         }
     }
+    /** The default delay in ms before showing the tooltip after show is called */
+    get showDelay() {
+        return this._showDelay;
+    }
+    set showDelay(value) {
+        this._showDelay = coerceNumberProperty(value);
+    }
+    /** The default delay in ms before hiding the tooltip after hide is called */
+    get hideDelay() {
+        return this._hideDelay;
+    }
+    set hideDelay(value) {
+        this._hideDelay = coerceNumberProperty(value);
+        if (this._tooltipInstance) {
+            this._tooltipInstance._mouseLeaveHideDelay = this._hideDelay;
+        }
+    }
     /** The message to be displayed in the tooltip */
     get message() {
         return this._message;
     }
     set message(value) {
-        this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message);
+        this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message, 'tooltip');
         // TODO: If the message is a TemplateRef, it's hard to support a11y.
         // If the message is not a string (e.g. number), convert it to a string and trim it.
+        // Must convert with `String(value)`, not `${value}`, otherwise Closure Compiler optimises
+        // away the string-conversion: https://github.com/angular/components/issues/20684
         this._message = value instanceof TemplateRef ? value : value != null ? `${value}`.trim() : '';
         if (!this._message && this._isTooltipVisible()) {
             this.hide(0);
@@ -142,11 +152,19 @@ class MtxTooltip {
                 // has a data-bound `aria-label` or when it'll be set for the first time. We can avoid the
                 // issue by deferring the description by a tick so Angular has time to set the `aria-label`.
                 Promise.resolve().then(() => {
-                    this._ariaDescriber.describe(this._elementRef.nativeElement, this.message);
+                    this._ariaDescriber.describe(this._elementRef.nativeElement, this.message, 'tooltip');
                 });
             });
         }
     }
+    /** Context to be passed to the tooltip. */
+    get tooltipContext() {
+        return this._tooltipContext;
+    }
+    set tooltipContext(value) {
+        this._tooltipContext = value;
+        this._setTooltipContext(this._tooltipContext);
+    }
     /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
     get tooltipClass() {
         return this._tooltipClass;
@@ -157,7 +175,7 @@ class MtxTooltip {
             this._setTooltipClass(this._tooltipClass);
         }
     }
-    constructor(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, _platform, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions) {
+    constructor(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, _platform, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions, _document) {
         this._overlay = _overlay;
         this._elementRef = _elementRef;
         this._scrollDispatcher = _scrollDispatcher;
@@ -169,13 +187,14 @@ class MtxTooltip {
         this._dir = _dir;
         this._defaultOptions = _defaultOptions;
         this._position = 'below';
+        this._positionAtOrigin = false;
         this._disabled = false;
         this._viewInitialized = false;
         this._pointerExitEventsInitialized = false;
-        /** The default delay in ms before showing the tooltip after show is called */
-        this.showDelay = this._defaultOptions.showDelay;
-        /** The default delay in ms before hiding the tooltip after hide is called */
-        this.hideDelay = this._defaultOptions.hideDelay;
+        this._viewportMargin = 8;
+        this._cssClassPrefix = 'mtx';
+        this._showDelay = this._defaultOptions.showDelay;
+        this._hideDelay = this._defaultOptions.hideDelay;
         /**
          * How touch gestures should be handled by the tooltip. On touch devices the tooltip directive
          * uses a long press gesture to show and hide, however it can conflict with the native browser
@@ -196,28 +215,23 @@ class MtxTooltip {
         this._passiveListeners = [];
         /** Emits when the component is destroyed. */
         this._destroyed = new Subject();
-        /**
-         * Handles the keydown events on the host element.
-         * Needs to be an arrow function so that we can use it in addEventListener.
-         */
-        this._handleKeydown = (event) => {
-            if (this._isTooltipVisible() && event.keyCode === ESCAPE && !hasModifierKey(event)) {
-                event.preventDefault();
-                event.stopPropagation();
-                this._ngZone.run(() => this.hide(0));
-            }
-        };
         this._scrollStrategy = scrollStrategy;
+        this._document = _document;
         if (_defaultOptions) {
             if (_defaultOptions.position) {
                 this.position = _defaultOptions.position;
             }
+            if (_defaultOptions.positionAtOrigin) {
+                this.positionAtOrigin = _defaultOptions.positionAtOrigin;
+            }
             if (_defaultOptions.touchGestures) {
                 this.touchGestures = _defaultOptions.touchGestures;
             }
         }
-        _ngZone.runOutsideAngular(() => {
-            _elementRef.nativeElement.addEventListener('keydown', this._handleKeydown);
+        _dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            if (this._overlayRef) {
+                this._updatePosition(this._overlayRef);
+            }
         });
     }
     ngAfterViewInit() {
@@ -248,66 +262,79 @@ class MtxTooltip {
             this._tooltipInstance = null;
         }
         // Clean up the event listeners set in the constructor
-        nativeElement.removeEventListener('keydown', this._handleKeydown);
         this._passiveListeners.forEach(([event, listener]) => {
             nativeElement.removeEventListener(event, listener, passiveListenerOptions);
         });
         this._passiveListeners.length = 0;
         this._destroyed.next();
         this._destroyed.complete();
-        this._ariaDescriber.removeDescription(nativeElement, this.message);
+        this._ariaDescriber.removeDescription(nativeElement, this.message, 'tooltip');
         this._focusMonitor.stopMonitoring(nativeElement);
     }
     /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
-    show(delay = this.showDelay) {
-        if (this.disabled ||
-            !this.message ||
-            (this._isTooltipVisible() &&
-                !this._tooltipInstance._showTimeoutId &&
-                !this._tooltipInstance._hideTimeoutId)) {
+    show(delay = this.showDelay, origin) {
+        if (this.disabled || !this.message || this._isTooltipVisible()) {
+            this._tooltipInstance?._cancelPendingAnimations();
             return;
         }
-        const overlayRef = this._createOverlay();
+        const overlayRef = this._createOverlay(origin);
         this._detach();
-        this._portal = this._portal || new ComponentPortal(TooltipComponent, this._viewContainerRef);
-        this._tooltipInstance = overlayRef.attach(this._portal).instance;
-        this._tooltipInstance
+        this._portal =
+            this._portal || new ComponentPortal(this._tooltipComponent, this._viewContainerRef);
+        const instance = (this._tooltipInstance = overlayRef.attach(this._portal).instance);
+        instance._triggerElement = this._elementRef.nativeElement;
+        instance._mouseLeaveHideDelay = this._hideDelay;
+        instance
             .afterHidden()
             .pipe(takeUntil(this._destroyed))
             .subscribe(() => this._detach());
         this._setTooltipClass(this._tooltipClass);
+        this._setTooltipContext(this._tooltipContext);
         this._updateTooltipMessage();
-        this._tooltipInstance.show(delay);
+        instance.show(delay);
     }
     /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
     hide(delay = this.hideDelay) {
-        if (this._tooltipInstance) {
-            this._tooltipInstance.hide(delay);
+        const instance = this._tooltipInstance;
+        if (instance) {
+            if (instance.isVisible()) {
+                instance.hide(delay);
+            }
+            else {
+                instance._cancelPendingAnimations();
+                this._detach();
+            }
         }
     }
     /** Shows/hides the tooltip */
-    toggle() {
-        this._isTooltipVisible() ? this.hide() : this.show();
+    toggle(origin) {
+        this._isTooltipVisible() ? this.hide() : this.show(undefined, origin);
     }
     /** Returns true if the tooltip is currently visible to the user */
     _isTooltipVisible() {
         return !!this._tooltipInstance && this._tooltipInstance.isVisible();
     }
     /** Create the overlay config and position strategy */
-    _createOverlay() {
+    _createOverlay(origin) {
         if (this._overlayRef) {
-            return this._overlayRef;
+            const existingStrategy = this._overlayRef.getConfig()
+                .positionStrategy;
+            if ((!this.positionAtOrigin || !origin) && existingStrategy._origin instanceof ElementRef) {
+                return this._overlayRef;
+            }
+            this._detach();
         }
         const scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef);
         // Create connected position strategy that listens for scroll events to reposition.
         const strategy = this._overlay
             .position()
-            .flexibleConnectedTo(this._elementRef)
-            .withTransformOriginOn('.mtx-tooltip')
+            .flexibleConnectedTo(this.positionAtOrigin ? origin || this._elementRef : this._elementRef)
+            .withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
             .withFlexibleDimensions(false)
-            .withViewportMargin(8)
+            .withViewportMargin(this._viewportMargin)
             .withScrollableContainers(scrollableAncestors);
         strategy.positionChanges.pipe(takeUntil(this._destroyed)).subscribe(change => {
+            this._updateCurrentPositionClass(change.connectionPair);
             if (this._tooltipInstance) {
                 if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) {
                     // After position changes occur and the overlay is clipped by
@@ -319,14 +346,31 @@ class MtxTooltip {
         this._overlayRef = this._overlay.create({
             direction: this._dir,
             positionStrategy: strategy,
-            panelClass: TOOLTIP_PANEL_CLASS,
+            panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`,
             scrollStrategy: this._scrollStrategy(),
         });
-        this._updatePosition();
+        this._updatePosition(this._overlayRef);
         this._overlayRef
             .detachments()
             .pipe(takeUntil(this._destroyed))
             .subscribe(() => this._detach());
+        this._overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => this._tooltipInstance?._handleBodyInteraction());
+        this._overlayRef
+            .keydownEvents()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(event => {
+            if (this._isTooltipVisible() && event.keyCode === ESCAPE && !hasModifierKey(event)) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._ngZone.run(() => this.hide(0));
+            }
+        });
+        if (this._defaultOptions?.disableTooltipInteractivity) {
+            this._overlayRef.addPanelClass(`${this._cssClassPrefix}-tooltip-panel-non-interactive`);
+        }
         return this._overlayRef;
     }
     /** Detaches the currently-attached tooltip. */
@@ -337,35 +381,38 @@ class MtxTooltip {
         this._tooltipInstance = null;
     }
     /** Updates the position of the current tooltip. */
-    _updatePosition() {
-        const position = this._overlayRef.getConfig()
-            .positionStrategy;
+    _updatePosition(overlayRef) {
+        const position = overlayRef.getConfig().positionStrategy;
         const origin = this._getOrigin();
         const overlay = this._getOverlayPosition();
         position.withPositions([
-            { ...origin.main, ...overlay.main },
-            { ...origin.fallback, ...overlay.fallback },
+            this._addOffset({ ...origin.main, ...overlay.main }),
+            this._addOffset({ ...origin.fallback, ...overlay.fallback }),
         ]);
     }
+    /** Adds the configured offset to a position. Used as a hook for child classes. */
+    _addOffset(position) {
+        return position;
+    }
     /**
      * Returns the origin position and a fallback position based on the user's position preference.
      * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
      */
     _getOrigin() {
-        const isLtr = !this._dir || this._dir.value === 'ltr';
+        const isLtr = !this._dir || this._dir.value == 'ltr';
         const position = this.position;
         let originPosition;
-        if (position === 'above' || position === 'below') {
-            originPosition = { originX: 'center', originY: position === 'above' ? 'top' : 'bottom' };
+        if (position == 'above' || position == 'below') {
+            originPosition = { originX: 'center', originY: position == 'above' ? 'top' : 'bottom' };
         }
-        else if (position === 'before' ||
-            (position === 'left' && isLtr) ||
-            (position === 'right' && !isLtr)) {
+        else if (position == 'before' ||
+            (position == 'left' && isLtr) ||
+            (position == 'right' && !isLtr)) {
             originPosition = { originX: 'start', originY: 'center' };
         }
-        else if (position === 'after' ||
-            (position === 'right' && isLtr) ||
-            (position === 'left' && !isLtr)) {
+        else if (position == 'after' ||
+            (position == 'right' && isLtr) ||
+            (position == 'left' && !isLtr)) {
             originPosition = { originX: 'end', originY: 'center' };
         }
         else {
@@ -379,23 +426,23 @@ class MtxTooltip {
     }
     /** Returns the overlay position and a fallback position based on the user's preference */
     _getOverlayPosition() {
-        const isLtr = !this._dir || this._dir.value === 'ltr';
+        const isLtr = !this._dir || this._dir.value == 'ltr';
         const position = this.position;
         let overlayPosition;
-        if (position === 'above') {
+        if (position == 'above') {
             overlayPosition = { overlayX: 'center', overlayY: 'bottom' };
         }
-        else if (position === 'below') {
+        else if (position == 'below') {
             overlayPosition = { overlayX: 'center', overlayY: 'top' };
         }
-        else if (position === 'before' ||
-            (position === 'left' && isLtr) ||
-            (position === 'right' && !isLtr)) {
+        else if (position == 'before' ||
+            (position == 'left' && isLtr) ||
+            (position == 'right' && !isLtr)) {
             overlayPosition = { overlayX: 'end', overlayY: 'center' };
         }
-        else if (position === 'after' ||
-            (position === 'right' && isLtr) ||
-            (position === 'left' && !isLtr)) {
+        else if (position == 'after' ||
+            (position == 'right' && isLtr) ||
+            (position == 'left' && !isLtr)) {
             overlayPosition = { overlayX: 'start', overlayY: 'center' };
         }
         else {
@@ -414,16 +461,20 @@ class MtxTooltip {
         if (this._tooltipInstance) {
             this._tooltipInstance.message = this.message;
             this._tooltipInstance._markForCheck();
-            this._ngZone.onMicrotaskEmpty
-                .asObservable()
-                .pipe(take(1), takeUntil(this._destroyed))
-                .subscribe(() => {
+            this._ngZone.onMicrotaskEmpty.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
                 if (this._tooltipInstance) {
                     this._overlayRef.updatePosition();
                 }
             });
         }
     }
+    /** Updates the tooltip context */
+    _setTooltipContext(tooltipContext) {
+        if (this._tooltipInstance) {
+            this._tooltipInstance.tooltipContext = tooltipContext;
+            this._tooltipInstance._markForCheck();
+        }
+    }
     /** Updates the tooltip class */
     _setTooltipClass(tooltipClass) {
         if (this._tooltipInstance) {
@@ -451,6 +502,36 @@ class MtxTooltip {
         }
         return { x, y };
     }
+    /** Updates the class on the overlay panel based on the current position of the tooltip. */
+    _updateCurrentPositionClass(connectionPair) {
+        const { overlayY, originX, originY } = connectionPair;
+        let newPosition;
+        // If the overlay is in the middle along the Y axis,
+        // it means that it's either before or after.
+        if (overlayY === 'center') {
+            // Note that since this information is used for styling, we want to
+            // resolve `start` and `end` to their real values, otherwise consumers
+            // would have to remember to do it themselves on each consumption.
+            if (this._dir && this._dir.value === 'rtl') {
+                newPosition = originX === 'end' ? 'left' : 'right';
+            }
+            else {
+                newPosition = originX === 'start' ? 'left' : 'right';
+            }
+        }
+        else {
+            newPosition = overlayY === 'bottom' && originY === 'top' ? 'above' : 'below';
+        }
+        if (newPosition !== this._currentPosition) {
+            const overlayRef = this._overlayRef;
+            if (overlayRef) {
+                const classPrefix = `${this._cssClassPrefix}-${PANEL_CLASS}-`;
+                overlayRef.removePanelClass(classPrefix + this._currentPosition);
+                overlayRef.addPanelClass(classPrefix + newPosition);
+            }
+            this._currentPosition = newPosition;
+        }
+    }
     /** Binds the pointer events to the tooltip trigger. */
     _setupPointerEnterEventsIfNeeded() {
         // Optimization: Defer hooking up events if there's no message or the tooltip is disabled.
@@ -465,9 +546,13 @@ class MtxTooltip {
         if (this._platformSupportsMouseEvents()) {
             this._passiveListeners.push([
                 'mouseenter',
-                () => {
+                event => {
                     this._setupPointerExitEventsIfNeeded();
-                    this.show();
+                    let point = undefined;
+                    if (event.x !== undefined && event.y !== undefined) {
+                        point = event;
+                    }
+                    this.show(undefined, point);
                 },
             ]);
         }
@@ -475,12 +560,14 @@ class MtxTooltip {
             this._disableNativeGesturesIfNecessary();
             this._passiveListeners.push([
                 'touchstart',
-                () => {
+                event => {
+                    const touch = event.targetTouches?.[0];
+                    const origin = touch ? { x: touch.clientX, y: touch.clientY } : undefined;
                     // Note that it's important that we don't `preventDefault` here,
                     // because it can prevent click events from firing on the element.
                     this._setupPointerExitEventsIfNeeded();
                     clearTimeout(this._touchstartTimeout);
-                    this._touchstartTimeout = setTimeout(() => this.show(), LONGPRESS_DELAY);
+                    this._touchstartTimeout = setTimeout(() => this.show(undefined, origin), LONGPRESS_DELAY);
                 },
             ]);
         }
@@ -493,7 +580,15 @@ class MtxTooltip {
         this._pointerExitEventsInitialized = true;
         const exitListeners = [];
         if (this._platformSupportsMouseEvents()) {
-            exitListeners.push(['mouseleave', () => this.hide()]);
+            exitListeners.push([
+                'mouseleave',
+                event => {
+                    const newTarget = event.relatedTarget;
+                    if (!newTarget || !this._overlayRef?.overlayElement.contains(newTarget)) {
+                        this.hide();
+                    }
+                },
+            ], ['wheel', event => this._wheelListener(event)]);
         }
         else if (this.touchGestures !== 'off') {
             this._disableNativeGesturesIfNecessary();
@@ -514,6 +609,20 @@ class MtxTooltip {
     _platformSupportsMouseEvents() {
         return !this._platform.IOS && !this._platform.ANDROID;
     }
+    /** Listener for the `wheel` event on the element. */
+    _wheelListener(event) {
+        if (this._isTooltipVisible()) {
+            const elementUnderPointer = this._document.elementFromPoint(event.clientX, event.clientY);
+            const element = this._elementRef.nativeElement;
+            // On non-touch devices we depend on the `mouseleave` event to close the tooltip, but it
+            // won't fire if the user scrolls away using the wheel without moving their cursor. We
+            // work around it by finding the element under the user's cursor and closing the tooltip
+            // if it's not the trigger.
+            if (elementUnderPointer !== element && !element.contains(elementUnderPointer)) {
+                this.hide();
+            }
+        }
+    }
     /** Disables the native browser gestures, based on how the tooltip has been configured. */
     _disableNativeGesturesIfNecessary() {
         const gestures = this.touchGestures;
@@ -535,36 +644,23 @@ class MtxTooltip {
                 style.webkitUserDrag = 'none';
             }
             style.touchAction = 'none';
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
             style.webkitTapHighlightColor = 'transparent';
         }
     }
 }
-/** @nocollapse */ MtxTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltip, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i2.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i3.Platform }, { token: i4.AriaDescriber }, { token: i4.FocusMonitor }, { token: MTX_TOOLTIP_SCROLL_STRATEGY }, { token: i5.Directionality, optional: true }, { token: MTX_TOOLTIP_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ MtxTooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: MtxTooltip, selector: "[mtxTooltip]", inputs: { position: ["mtxTooltipPosition", "position"], disabled: ["mtxTooltipDisabled", "disabled"], showDelay: ["mtxTooltipShowDelay", "showDelay"], hideDelay: ["mtxTooltipHideDelay", "hideDelay"], touchGestures: ["mtxTooltipTouchGestures", "touchGestures"], message: ["mtxTooltip", "message"], tooltipClass: ["mtxTooltipClass", "tooltipClass"] }, host: { classAttribute: "mtx-tooltip-trigger" }, exportAs: ["mtxTooltip"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltip, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mtxTooltip]',
-                    exportAs: 'mtxTooltip',
-                    host: {
-                        class: 'mtx-tooltip-trigger',
-                    },
-                }]
-        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i3.Platform }, { type: i4.AriaDescriber }, { type: i4.FocusMonitor }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MTX_TOOLTIP_SCROLL_STRATEGY]
-                }] }, { type: i5.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
+/** @nocollapse */ _MtxTooltipBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _MtxTooltipBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ _MtxTooltipBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: _MtxTooltipBase, inputs: { position: ["mtxTooltipPosition", "position"], positionAtOrigin: ["mtxTooltipPositionAtOrigin", "positionAtOrigin"], disabled: ["mtxTooltipDisabled", "disabled"], showDelay: ["mtxTooltipShowDelay", "showDelay"], hideDelay: ["mtxTooltipHideDelay", "hideDelay"], touchGestures: ["mtxTooltipTouchGestures", "touchGestures"], message: ["mtxTooltip", "message"], tooltipContext: ["mtxTooltipContext", "tooltipContext"], tooltipClass: ["mtxTooltipClass", "tooltipClass"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _MtxTooltipBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i1.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.AriaDescriber }, { type: i3.FocusMonitor }, { type: undefined }, { type: i4.Directionality }, { type: undefined }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MTX_TOOLTIP_DEFAULT_OPTIONS]
+                    args: [DOCUMENT]
                 }] }]; }, propDecorators: { position: [{
                 type: Input,
                 args: ['mtxTooltipPosition']
+            }], positionAtOrigin: [{
+                type: Input,
+                args: ['mtxTooltipPositionAtOrigin']
             }], disabled: [{
                 type: Input,
                 args: ['mtxTooltipDisabled']
@@ -580,26 +676,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
             }], message: [{
                 type: Input,
                 args: ['mtxTooltip']
+            }], tooltipContext: [{
+                type: Input,
+                args: ['mtxTooltipContext']
             }], tooltipClass: [{
                 type: Input,
                 args: ['mtxTooltipClass']
             }] } });
 /**
- * Internal component that wraps the tooltip's content.
- * @docs-private
+ * Directive that attaches a material design tooltip to the host element. Animates the showing and
+ * hiding of a tooltip provided position (defaults to below the element).
+ *
+ * https://material.io/design/components/tooltips.html
  */
-class TooltipComponent {
-    constructor(_changeDetectorRef, _breakpointObserver) {
+class MtxTooltip extends _MtxTooltipBase {
+    constructor(overlay, elementRef, scrollDispatcher, viewContainerRef, ngZone, platform, ariaDescriber, focusMonitor, scrollStrategy, dir, defaultOptions, _document) {
+        super(overlay, elementRef, scrollDispatcher, viewContainerRef, ngZone, platform, ariaDescriber, focusMonitor, scrollStrategy, dir, defaultOptions, _document);
+        this._tooltipComponent = TooltipComponent;
+        this._cssClassPrefix = 'mtx-mdc';
+        this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
+    }
+    _addOffset(position) {
+        const offset = UNBOUNDED_ANCHOR_GAP;
+        const isLtr = !this._dir || this._dir.value == 'ltr';
+        if (position.originY === 'top') {
+            position.offsetY = -offset;
+        }
+        else if (position.originY === 'bottom') {
+            position.offsetY = offset;
+        }
+        else if (position.originX === 'start') {
+            position.offsetX = isLtr ? -offset : offset;
+        }
+        else if (position.originX === 'end') {
+            position.offsetX = isLtr ? offset : -offset;
+        }
+        return position;
+    }
+}
+/** @nocollapse */ MtxTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltip, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i1.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.AriaDescriber }, { token: i3.FocusMonitor }, { token: MTX_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: MTX_TOOLTIP_DEFAULT_OPTIONS, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ MtxTooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: MtxTooltip, selector: "[mtxTooltip]", host: { classAttribute: "mtx-mdc-tooltip-trigger" }, exportAs: ["mtxTooltip"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mtxTooltip]',
+                    exportAs: 'mtxTooltip',
+                    host: {
+                        class: 'mtx-mdc-tooltip-trigger',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i1.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.AriaDescriber }, { type: i3.FocusMonitor }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MTX_TOOLTIP_SCROLL_STRATEGY]
+                }] }, { type: i4.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTX_TOOLTIP_DEFAULT_OPTIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+class _TooltipComponentBase {
+    constructor(_changeDetectorRef, animationMode) {
         this._changeDetectorRef = _changeDetectorRef;
-        this._breakpointObserver = _breakpointObserver;
-        /** Property watched by the animation framework to show or hide the tooltip */
-        this._visibility = 'initial';
         /** Whether interactions on the page should close the tooltip */
         this._closeOnInteraction = false;
+        /** Whether the tooltip is currently visible. */
+        this._isVisible = false;
         /** Subject for notifying that the tooltip has been hidden from the view */
         this._onHide = new Subject();
-        /** Stream that emits whether the user has a handset-sized display.  */
-        this._isHandset = this._breakpointObserver.observe(Breakpoints.Handset);
+        this._animationsDisabled = animationMode === 'NoopAnimations';
     }
     /**
      * Shows the tooltip with an animation originating from the provided origin
@@ -607,18 +756,10 @@ class TooltipComponent {
      */
     show(delay) {
         // Cancel the delayed hide if it is scheduled
-        if (this._hideTimeoutId) {
-            clearTimeout(this._hideTimeoutId);
-            this._hideTimeoutId = null;
-        }
-        // Body interactions should cancel the tooltip if there is a delay in showing.
-        this._closeOnInteraction = true;
+        clearTimeout(this._hideTimeoutId);
         this._showTimeoutId = setTimeout(() => {
-            this._visibility = 'visible';
-            this._showTimeoutId = null;
-            // Mark for check so if any parent component has set the
-            // ChangeDetectionStrategy to OnPush it will be checked anyways
-            this._markForCheck();
+            this._toggleVisibility(true);
+            this._showTimeoutId = undefined;
         }, delay);
     }
     /**
@@ -627,40 +768,24 @@ class TooltipComponent {
      */
     hide(delay) {
         // Cancel the delayed show if it is scheduled
-        if (this._showTimeoutId) {
-            clearTimeout(this._showTimeoutId);
-            this._showTimeoutId = null;
-        }
+        clearTimeout(this._showTimeoutId);
         this._hideTimeoutId = setTimeout(() => {
-            this._visibility = 'hidden';
-            this._hideTimeoutId = null;
-            // Mark for check so if any parent component has set the
-            // ChangeDetectionStrategy to OnPush it will be checked anyways
-            this._markForCheck();
+            this._toggleVisibility(false);
+            this._hideTimeoutId = undefined;
         }, delay);
     }
     /** Returns an observable that notifies when the tooltip has been hidden from view. */
     afterHidden() {
-        return this._onHide.asObservable();
+        return this._onHide;
     }
     /** Whether the tooltip is being displayed. */
     isVisible() {
-        return this._visibility === 'visible';
+        return this._isVisible;
     }
     ngOnDestroy() {
+        this._cancelPendingAnimations();
         this._onHide.complete();
-    }
-    _animationStart() {
-        this._closeOnInteraction = false;
-    }
-    _animationDone(event) {
-        const toState = event.toState;
-        if (toState === 'hidden' && !this.isVisible()) {
-            this._onHide.next();
-        }
-        if (toState === 'visible' || toState === 'hidden') {
-            this._closeOnInteraction = true;
-        }
+        this._triggerElement = null;
     }
     /**
      * Interactions on the HTML body should close the tooltip immediately as defined in the
@@ -680,19 +805,130 @@ class TooltipComponent {
     _markForCheck() {
         this._changeDetectorRef.markForCheck();
     }
+    _handleMouseLeave({ relatedTarget }) {
+        if (!relatedTarget || !this._triggerElement.contains(relatedTarget)) {
+            if (this.isVisible()) {
+                this.hide(this._mouseLeaveHideDelay);
+            }
+            else {
+                this._finalizeAnimation(false);
+            }
+        }
+    }
+    /**
+     * Callback for when the timeout in this.show() gets completed.
+     * This method is only needed by the mdc-tooltip, and so it is only implemented
+     * in the mdc-tooltip, not here.
+     */
+    _onShow() { }
+    /** Event listener dispatched when an animation on the tooltip finishes. */
+    _handleAnimationEnd({ animationName }) {
+        if (animationName === this._showAnimation || animationName === this._hideAnimation) {
+            this._finalizeAnimation(animationName === this._showAnimation);
+        }
+    }
+    /** Cancels any pending animation sequences. */
+    _cancelPendingAnimations() {
+        clearTimeout(this._showTimeoutId);
+        clearTimeout(this._hideTimeoutId);
+        this._showTimeoutId = this._hideTimeoutId = undefined;
+    }
+    /** Handles the cleanup after an animation has finished. */
+    _finalizeAnimation(toVisible) {
+        if (toVisible) {
+            this._closeOnInteraction = true;
+        }
+        else if (!this.isVisible()) {
+            this._onHide.next();
+        }
+    }
+    /** Toggles the visibility of the tooltip element. */
+    _toggleVisibility(isVisible) {
+        // We set the classes directly here ourselves so that toggling the tooltip state
+        // isn't bound by change detection. This allows us to hide it even if the
+        // view ref has been detached from the CD tree.
+        const tooltip = this._tooltip.nativeElement;
+        const showClass = this._showAnimation;
+        const hideClass = this._hideAnimation;
+        tooltip.classList.remove(isVisible ? hideClass : showClass);
+        tooltip.classList.add(isVisible ? showClass : hideClass);
+        this._isVisible = isVisible;
+        // It's common for internal apps to disable animations using `* { animation: none !important }`
+        // which can break the opening sequence. Try to detect such cases and work around them.
+        if (isVisible && !this._animationsDisabled && typeof getComputedStyle === 'function') {
+            const styles = getComputedStyle(tooltip);
+            // Use `getPropertyValue` to avoid issues with property renaming.
+            if (styles.getPropertyValue('animation-duration') === '0s' ||
+                styles.getPropertyValue('animation-name') === 'none') {
+                this._animationsDisabled = true;
+            }
+        }
+        if (isVisible) {
+            this._onShow();
+        }
+        if (this._animationsDisabled) {
+            tooltip.classList.add('_mtx-animation-noopable');
+            this._finalizeAnimation(isVisible);
+        }
+    }
+}
+/** @nocollapse */ _TooltipComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _TooltipComponentBase, deps: [{ token: i0.ChangeDetectorRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ _TooltipComponentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: _TooltipComponentBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _TooltipComponentBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }]; } });
+/**
+ * Internal component that wraps the tooltip's content.
+ * @docs-private
+ */
+class TooltipComponent extends _TooltipComponentBase {
+    constructor(changeDetectorRef, _elementRef, animationMode) {
+        super(changeDetectorRef, animationMode);
+        this._elementRef = _elementRef;
+        /* Whether the tooltip text overflows to multiple lines */
+        this._isMultiline = false;
+        this._showAnimation = 'mtx-mdc-tooltip-show';
+        this._hideAnimation = 'mtx-mdc-tooltip-hide';
+    }
+    _onShow() {
+        this._isMultiline = this._isTooltipMultiline();
+        this._markForCheck();
+    }
+    /** Whether the tooltip text has overflown to the next line */
+    _isTooltipMultiline() {
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        return rect.height > MIN_HEIGHT && rect.width >= MAX_WIDTH;
+    }
 }
-/** @nocollapse */ TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i6.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: TooltipComponent, selector: "mtx-tooltip-component", host: { attributes: { "aria-hidden": "true" }, listeners: { "body:click": "this._handleBodyInteraction()" }, properties: { "style.zoom": "_visibility === \"visible\" ? 1 : null" } }, ngImport: i0, template: "<div class=\"mtx-tooltip\"\n     [ngClass]=\"tooltipClass\"\n     [class.mtx-tooltip-handset]=\"(_isHandset | async)?.matches\"\n     [@state]=\"_visibility\"\n     (@state.start)=\"_animationStart()\"\n     (@state.done)=\"_animationDone($event)\">\n  <ng-template [ngIf]=\"message | isTemplateRef\" [ngIfElse]=\"msgStrTpl\">\n    <ng-template [ngTemplateOutlet]=\"$any(message)\"></ng-template>\n  </ng-template>\n  <ng-template #msgStrTpl>{{message}}</ng-template>\n</div>\n", styles: [".mtx-tooltip-panel{pointer-events:none!important}.mtx-tooltip{color:#fff;border-radius:4px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px;overflow:hidden;text-overflow:ellipsis}.cdk-high-contrast-active .mtx-tooltip{outline:solid 1px}.mtx-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.MtxIsTemplateRefPipe, name: "isTemplateRef" }], animations: [mtxTooltipAnimations.tooltipState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: TooltipComponent, selector: "mtx-tooltip-component", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseleave": "_handleMouseLeave($event)" }, properties: { "style.zoom": "isVisible() ? 1 : null" } }, viewQueries: [{ propertyName: "_tooltip", first: true, predicate: ["tooltip"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #tooltip\n     class=\"mdc-tooltip mdc-tooltip--shown mtx-mdc-tooltip\"\n     [ngClass]=\"tooltipClass\"\n     (animationend)=\"_handleAnimationEnd($event)\"\n     [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n    <ng-template [ngIf]=\"message | isTemplateRef\" [ngIfElse]=\"msgStrTpl\">\n      <ng-template [ngTemplateOutlet]=\"$any(message)\"\n                   [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n    </ng-template>\n    <ng-template #msgStrTpl>{{message}}</ng-template>\n  </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip{position:fixed;display:none;z-index:9}.mdc-tooltip-wrapper--rich{position:relative}.mdc-tooltip--shown,.mdc-tooltip--showing,.mdc-tooltip--hide{display:inline-flex}.mdc-tooltip--shown.mdc-tooltip--rich,.mdc-tooltip--showing.mdc-tooltip--rich,.mdc-tooltip--hide.mdc-tooltip--rich{display:inline-block;left:-320px;position:absolute}.mdc-tooltip__surface{line-height:16px;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center}.mdc-tooltip__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-tooltip__surface:before{border-color:CanvasText}}.mdc-tooltip--rich .mdc-tooltip__surface{align-items:flex-start;display:flex;flex-direction:column;min-height:24px;min-width:40px;max-width:320px;position:relative}.mdc-tooltip--multiline .mdc-tooltip__surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface,.mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl]{text-align:right}.mdc-tooltip__surface .mdc-tooltip__title{margin:0 8px}.mdc-tooltip__surface .mdc-tooltip__content{max-width:184px;margin:8px;text-align:left}[dir=rtl] .mdc-tooltip__surface .mdc-tooltip__content,.mdc-tooltip__surface .mdc-tooltip__content[dir=rtl]{text-align:right}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-tooltip__content{max-width:304px;align-self:stretch}.mdc-tooltip__surface .mdc-tooltip__content-link{text-decoration:none}.mdc-tooltip--rich-actions,.mdc-tooltip__content,.mdc-tooltip__title{z-index:1}.mdc-tooltip__surface-animation{opacity:0;transform:scale(.8);will-change:transform,opacity}.mdc-tooltip--shown .mdc-tooltip__surface-animation{transform:scale(1);opacity:1}.mdc-tooltip--hide .mdc-tooltip__surface-animation{transform:scale(1)}.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{position:absolute;height:24px;width:24px;transform:rotate(35deg) skewY(20deg) scaleX(.9396926208)}.mdc-tooltip__caret-surface-top .mdc-elevation-overlay,.mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip__caret-surface-bottom{outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color, #fff)}.mdc-tooltip__surface,.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape, var(--mdc-shape-small, 4px))}.mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color, #000)}.mdc-tooltip__surface{font-family:var(--mdc-plain-tooltip-supporting-text-font, inherit);font-size:var(--mdc-plain-tooltip-supporting-text-size, inherit);font-weight:var(--mdc-plain-tooltip-supporting-text-weight, inherit);letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, inherit)}.mtx-mdc-tooltip{position:relative;transform:scale(0)}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mtx-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.MtxIsTemplateRefPipe, name: "isTemplateRef" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-tooltip-component', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [mtxTooltipAnimations.tooltipState], host: {
+            args: [{ selector: 'mtx-tooltip-component', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Forces the element to have a layout in IE and Edge. This fixes issues where the element
                         // won't be rendered if the animations are disabled or there is no web animations polyfill.
-                        '[style.zoom]': '_visibility === "visible" ? 1 : null',
-                        '(body:click)': 'this._handleBodyInteraction()',
+                        '[style.zoom]': 'isVisible() ? 1 : null',
+                        '(mouseleave)': '_handleMouseLeave($event)',
                         'aria-hidden': 'true',
-                    }, template: "<div class=\"mtx-tooltip\"\n     [ngClass]=\"tooltipClass\"\n     [class.mtx-tooltip-handset]=\"(_isHandset | async)?.matches\"\n     [@state]=\"_visibility\"\n     (@state.start)=\"_animationStart()\"\n     (@state.done)=\"_animationDone($event)\">\n  <ng-template [ngIf]=\"message | isTemplateRef\" [ngIfElse]=\"msgStrTpl\">\n    <ng-template [ngTemplateOutlet]=\"$any(message)\"></ng-template>\n  </ng-template>\n  <ng-template #msgStrTpl>{{message}}</ng-template>\n</div>\n", styles: [".mtx-tooltip-panel{pointer-events:none!important}.mtx-tooltip{color:#fff;border-radius:4px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px;overflow:hidden;text-overflow:ellipsis}.cdk-high-contrast-active .mtx-tooltip{outline:solid 1px}.mtx-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i6.BreakpointObserver }]; } });
+                    }, template: "<div #tooltip\n     class=\"mdc-tooltip mdc-tooltip--shown mtx-mdc-tooltip\"\n     [ngClass]=\"tooltipClass\"\n     (animationend)=\"_handleAnimationEnd($event)\"\n     [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n    <ng-template [ngIf]=\"message | isTemplateRef\" [ngIfElse]=\"msgStrTpl\">\n      <ng-template [ngTemplateOutlet]=\"$any(message)\"\n                   [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n    </ng-template>\n    <ng-template #msgStrTpl>{{message}}</ng-template>\n  </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip{position:fixed;display:none;z-index:9}.mdc-tooltip-wrapper--rich{position:relative}.mdc-tooltip--shown,.mdc-tooltip--showing,.mdc-tooltip--hide{display:inline-flex}.mdc-tooltip--shown.mdc-tooltip--rich,.mdc-tooltip--showing.mdc-tooltip--rich,.mdc-tooltip--hide.mdc-tooltip--rich{display:inline-block;left:-320px;position:absolute}.mdc-tooltip__surface{line-height:16px;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center}.mdc-tooltip__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-tooltip__surface:before{border-color:CanvasText}}.mdc-tooltip--rich .mdc-tooltip__surface{align-items:flex-start;display:flex;flex-direction:column;min-height:24px;min-width:40px;max-width:320px;position:relative}.mdc-tooltip--multiline .mdc-tooltip__surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface,.mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl]{text-align:right}.mdc-tooltip__surface .mdc-tooltip__title{margin:0 8px}.mdc-tooltip__surface .mdc-tooltip__content{max-width:184px;margin:8px;text-align:left}[dir=rtl] .mdc-tooltip__surface .mdc-tooltip__content,.mdc-tooltip__surface .mdc-tooltip__content[dir=rtl]{text-align:right}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-tooltip__content{max-width:304px;align-self:stretch}.mdc-tooltip__surface .mdc-tooltip__content-link{text-decoration:none}.mdc-tooltip--rich-actions,.mdc-tooltip__content,.mdc-tooltip__title{z-index:1}.mdc-tooltip__surface-animation{opacity:0;transform:scale(.8);will-change:transform,opacity}.mdc-tooltip--shown .mdc-tooltip__surface-animation{transform:scale(1);opacity:1}.mdc-tooltip--hide .mdc-tooltip__surface-animation{transform:scale(1)}.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{position:absolute;height:24px;width:24px;transform:rotate(35deg) skewY(20deg) scaleX(.9396926208)}.mdc-tooltip__caret-surface-top .mdc-elevation-overlay,.mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip__caret-surface-bottom{outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color, #fff)}.mdc-tooltip__surface,.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape, var(--mdc-shape-small, 4px))}.mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color, #000)}.mdc-tooltip__surface{font-family:var(--mdc-plain-tooltip-supporting-text-font, inherit);font-size:var(--mdc-plain-tooltip-supporting-text-size, inherit);font-weight:var(--mdc-plain-tooltip-supporting-text-weight, inherit);letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, inherit)}.mtx-mdc-tooltip{position:relative;transform:scale(0)}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mtx-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }]; }, propDecorators: { _tooltip: [{
+                type: ViewChild,
+                args: ['tooltip', {
+                        // Use a static query here since we interact directly with
+                        // the DOM which can happen before `ngAfterViewInit`.
+                        static: true,
+                    }]
+            }] } });
 
 class MtxTooltipModule {
 }
@@ -709,9 +945,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 }]
         }] });
 
+/**
+ * Animations used by MatTooltip.
+ * @docs-private
+ */
+const matTooltipAnimations = {
+    /** Animation that transitions a tooltip in and out. */
+    tooltipState: trigger('state', [
+        // TODO(crisbeto): these values are based on MDC's CSS.
+        // We should be able to use their styles directly once we land #19432.
+        state('initial, void, hidden', style({ opacity: 0, transform: 'scale(0.8)' })),
+        state('visible', style({ transform: 'scale(1)' })),
+        transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
+        transition('* => hidden', animate('75ms cubic-bezier(0.4, 0, 1, 1)')),
+    ]),
+};
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MTX_TOOLTIP_DEFAULT_OPTIONS, MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY, MTX_TOOLTIP_SCROLL_STRATEGY, MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY, MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxTooltip, MtxTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, TooltipComponent, getMtxTooltipInvalidPositionError, mtxTooltipAnimations };
+export { MTX_TOOLTIP_DEFAULT_OPTIONS, MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY, MTX_TOOLTIP_SCROLL_STRATEGY, MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY, MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxTooltip, MtxTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, TooltipComponent, _MtxTooltipBase, _TooltipComponentBase, getMtxTooltipInvalidPositionError, matTooltipAnimations };
 //# sourceMappingURL=mtxTooltip.mjs.map