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

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.ts

@@ -115,7 +115,20 @@ 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);
  }
+
+ 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,8 @@ export abstract class _TooltipComponentBase implements OnDestroy {
  _markForCheck(): void {
  this._changeDetectorRef.markForCheck();
  }
+
+ protected _onShow(): void {}
 }
 
 /**