bug(tooltip): Tooltips are sometimes empty #24278
Description
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:
- Pressing a keyboard input like CTRL or ALT will update the view and show the correct tooltip.
- Removing
*ngIfor setting it totruewill 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:
- 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