bug(tooltip): Tooltips are sometimes empty

[sebastianrath]

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

[wagnermaciel]

Could you provide a reproduction in stackblitz? My best guess would be that you forgot to include the tooltip theme styles.

[sebastianrath]

I tried to reproduce this, without any success yet. The tooltip themes are included, and they work if I literally set it to *ngIf="true" but I understand if the given information is not enough. I will keep reducing my project as far as I can.

[crisbeto]

I can reproduce something similar if I explicitly try to bind the tooltip's mouseenter event using NgZone.runOutsideAngular. Maybe something similar is happening in this case?

[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",

[s001dxp]

I'm experiencing the same issue. Sometime they show and sometimes they don't.

[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.

[kiranatious]

Im able to reproduce the issue..

[kiranatious]

the issue exists ver 9

[Bettaswamy]

Any update on this tooltip issue.

[Bettaswamy]

I'm experiencing the same issue. Sometime they show and sometimes they don't.

Were you able to fix this? @s001dxp

[axel-lois]

Happening to me as well, did someoene find a solution?

[mandelbox]

We are also encountering this bug.

[Harpush]

We also have this bug - mostly in ag grid cells

[zarend]

Hello,

Thank you for reporting. We are unable to reproduce. I was wondering if we could check with you if this issue requires further action. Unfortunately we may not be able to take action if we cannot reproduce it. Could you please provide a stackblitz reproduction of the issue?

Best regards,

Zach

[llorenspujol]

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.

[louischristner]

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.

[aarce1054]

Me pasa lo mismo , alguien pudo resolver este problema?

[joewIST]

We also experience this issue; we see the grey box for about 0.5s and then the actual tooltip and content appears.

[louischristner]

We found a solution to our issue (see previous comment). The problem was caused by the ComponentFactoryResolver which was deprecated. We replaced the ComponentFactoryResolver by a ViewContainerRef as specified in this Stackoverflow post.

Here you can find a fixed version of the previous Stackblitz.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}