components: 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:
- Pressing a keyboard input like CTRL or ALT will update the view and show the correct tooltip.
- Removing
*ngIf
or setting it totrue
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:
- 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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 3
- Comments: 20 (4 by maintainers)
Commits related to this issue
- Use title instead of mattooltip due to UI bug https://github.com/angular/components/issues/24278 — committed to actionforge/graph-editor by sebastianrath 6 months ago
- Use title instead of mattooltip due to UI bug https://github.com/angular/components/issues/24278 — committed to actionforge/graph-editor by sebastianrath 6 months ago
We encountered this issue when using tooltips in a Leaflet popup. We generate the popup from an angular component with a tooltip using a factory. The component works as intended when used outside of Leaflet, but when used in a popup the tooltip appears empty.
https://github.com/angular/components/assets/52711941/edd1c511-7edb-4f67-9871-f3077ba5702d
I created a reproduction of the issue in Stackblitz.
I also encountered this bug. It happens 100% of the time when the tooltip is created outside the zone. In such cases, the
mouseenter
event will not be within the zone, and consequently,this._ngZone.onMicrotaskEmpty
will not emit. Here is a StackBlitz that reproduces it.Overall, creating components outside the zone doesn’t seem like a great idea, but sometimes it happens due to other factors. Would it be beneficial to check whether we are outside the zone and re-enter if that is the case? The only drawback is that 99% of the time, that checking function will return
true
and not provide additional value. On the other hand, this bug would be solved.I can provide a PR.
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”,