fix(material-experimental/mdc-tooltip): fix text alignment of multili… (#22981)

* fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* Add the 'mdc-tooltip--multiline' class when a tooltip overflows
  to make the text align left (or right in rtl) instead of center

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* test(material-experimental/mdc-tooltip): ensure the multiline class is set on tooltips with messages that overflow

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

Author: wagnermaciel

src/material-experimental/mdc-tooltip/tooltip.html

@@ -1,6 +1,7 @@
 <div
   class="mdc-tooltip mdc-tooltip--shown mat-mdc-tooltip"
   [ngClass]="tooltipClass"
+  [class.mdc-tooltip--multiline]="_isMultiline"
   [@state]="_visibility"
   (@state.start)="_animationStart()"
   (@state.done)="_animationDone($event)">

src/material-experimental/mdc-tooltip/tooltip.spec.ts

@@ -865,6 +865,23 @@ describe('MDC-based MatTooltip', () => {
       fixture.destroy();
     }));
 
+    it('should set the multiline class on tooltips with messages that overflow', fakeAsync(() => {
+      fixture.componentInstance.message = 'This is a very long message that should cause the'
+        + 'tooltip message body to overflow onto a new line.';
+      tooltipDirective.show();
+      fixture.detectChanges();
+      tick();
+
+      // Need to detect changes again to wait for the multiline class to be applied.
+      fixture.detectChanges();
+
+      const tooltipElement =
+          overlayContainerElement.querySelector('.mat-mdc-tooltip') as HTMLElement;
+
+      expect(tooltipElement.classList).toContain('mdc-tooltip--multiline');
+      expect(tooltipDirective._tooltipInstance?._isMultiline).toBeTrue();
+    }));
+
   });
 
   describe('fallback positions', () => {

src/material-experimental/mdc-tooltip/tooltip.ts

@@ -115,7 +115,21 @@ export class MatTooltip extends _MatTooltipBase<TooltipComponent> {
   }
 })
 export class TooltipComponent extends _TooltipComponentBase {
-  constructor(changeDetectorRef: ChangeDetectorRef) {
+  /* Whether the tooltip text overflows to multiple lines */
+  _isMultiline: boolean = false;
+
+  constructor(changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) {
     super(changeDetectorRef);
   }
+
+  /** @override */
+  protected _onShow(): void {
+    this._isMultiline = this._isTooltipMultiline();
+  }
+
+  /** Whether the tooltip text has overflown to the next line */
+  private _isTooltipMultiline() {
+    const rect = this._elementRef.nativeElement.getBoundingClientRect();
+    return rect.height > numbers.MIN_HEIGHT && rect.width >= numbers.MAX_WIDTH;
+  }
 }

src/material/tooltip/tooltip.ts

@@ -791,6 +791,7 @@ export abstract class _TooltipComponentBase implements OnDestroy {
     this._showTimeoutId = setTimeout(() => {
       this._visibility = 'visible';
       this._showTimeoutId = undefined;
+      this._onShow();
 
       // Mark for check so if any parent component has set the
       // ChangeDetectionStrategy to OnPush it will be checked anyways
@@ -867,6 +868,13 @@ export abstract class _TooltipComponentBase implements OnDestroy {
   _markForCheck(): void {
     this._changeDetectorRef.markForCheck();
   }
+
+  /**
+   * 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.
+   */
+  protected _onShow(): void {}
 }
 
 /**

tools/public_api_guard/material/tooltip.d.ts

@@ -56,6 +56,7 @@ export declare abstract class _TooltipComponentBase implements OnDestroy {
     _animationStart(): void;
     _handleBodyInteraction(): void;
     _markForCheck(): void;
+    protected _onShow(): void;
     afterHidden(): Observable<void>;
     hide(delay: number): void;
     isVisible(): boolean;