bug(tooltip): Tooltips are sometimes empty

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I am using MatToolTip and I encounter them often being empty like this:

Each hover creates an additional empty bubble with an offset to the right. I can’t replicate this on Stackblitz yet.

My component looks like this:

foo.component.html

<div *ngIf="project">
   <button mat-icon-button type="button" matTooltip="XYZ">
      Hover me
   </button>
</div>

foo.component.ts

...
@Input() project: FooProject | null;
...

foo.component.scss

// Empty

I made two observations:

1. Pressing a keyboard input like CTRL or ALT will update the view and show the correct tooltip.
2. Removing *ngIf or setting it to true will result in a correct tooltip behaviour.

This is how the DOM looks like if the tooltip is empty:

<div class="cdk-overlay-container">
    <div class="cdk-overlay-connected-position-bounding-box" dir="ltr"
        style="top: 0px; left: 0px; height: 100%; width: 100%;">
        <div id="cdk-overlay-8" class="cdk-overlay-pane mat-tooltip-panel" style="top: 303px; left: 510.273px;">
            <mat-tooltip-component aria-hidden="true" class="ng-tns-c42-131">
                <div class="mat-tooltip ng-tns-c42-131 ng-trigger ng-trigger-state"></div>
            </mat-tooltip-component>
        </div>
    </div>
</div>

Reproduction

Steps to reproduce:

1. Hover over the tooltip.

Expected Behavior

This is how it should look like.

Actual Behavior

The tooltips are empty.

Environment

• Angular: 11.2.13
• CDK/Material: 11.2.13
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS, Windows, Linux

[areksliwa-modento]

I have the same issue. I have a table with patients and after scrolling down, there are new rows rendered. And the issue with tooltip empty squares appears only on these newly rendered rows. After 700 delay tooltip with content appear correctly

“@angular/cdk”: “^13.2.4”, “@angular/common”: “^13.2.4”, “@angular/compiler”: “^13.2.4”, “@angular/core”: “^13.2.4”, “@angular/forms”: “^13.2.4”, “@angular/material”: “^13.2.4”,

[sebastianrath]

I couldn’t find the cause on my side either, and I switched to popper.js with Angular bindings. It took me just a few minutes to replace 100 tooltips across my app.