diff --git a/src/material-experimental/mdc-tooltip/tooltip.html b/src/material-experimental/mdc-tooltip/tooltip.html
index a0ce52a5f955..6eff2c6af2c9 100644
--- a/src/material-experimental/mdc-tooltip/tooltip.html
+++ b/src/material-experimental/mdc-tooltip/tooltip.html
@@ -1,6 +1,7 @@
diff --git a/src/material-experimental/mdc-tooltip/tooltip.spec.ts b/src/material-experimental/mdc-tooltip/tooltip.spec.ts
index 156bf1a718ee..424d51ea4806 100644
--- a/src/material-experimental/mdc-tooltip/tooltip.spec.ts
+++ b/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', () => {
diff --git a/src/material-experimental/mdc-tooltip/tooltip.ts b/src/material-experimental/mdc-tooltip/tooltip.ts
index b1603e0fa2b1..ed9d1596c496 100644
--- a/src/material-experimental/mdc-tooltip/tooltip.ts
+++ b/src/material-experimental/mdc-tooltip/tooltip.ts
@@ -115,7 +115,21 @@ export class MatTooltip extends _MatTooltipBase {
}
})
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;
+ }
}
diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts
index 7e462626d429..5fda975ba472 100644
--- a/src/material/tooltip/tooltip.ts
+++ b/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 {}
}
/**
diff --git a/tools/public_api_guard/material/tooltip.d.ts b/tools/public_api_guard/material/tooltip.d.ts
index 7fe5c1ab613c..c4e3176cf6ee 100644
--- a/tools/public_api_guard/material/tooltip.d.ts
+++ b/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;
hide(delay: number): void;
isVisible(): boolean;