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;