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

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;