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:

Screen Shot 2022-01-26 at 10 29 17 AM

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.

Screen Shot 2022-01-26 at 10 32 07 AM

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

Most upvoted comments

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.

Screenshot from 2023-11-09 10-46-46

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”,