bug(TOOLTIP): Tooltip hide animation appears even if show delay not reached

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

13.2.4

Description

When using ShowDelay>0, and the cursor doesn’t stay long enough to display the tooltip, when leaving the trigger element, the tooltip suddently appears and immediately starts the hide fade out animation. Very disturbing when switching between multiple trigger elements (buttons for instance) with tooltips because if you move quickly over them, they all display the tooltip fade out animation

NB: I’m also using “disableTooltipInteractivity=true” to remove the “blocked by tooltip” side effect started from 13.2.5

Reproduction

Steps to reproduce:

1. Add a tooltip with a showDelay of 2000ms: <span matTooltip="The phantom tooltip" matTooltipShowDelay="2000">hello, i have a tooltip. Move quickly over me</span>
2. Move the mouse over the span element, and leave before the show delay elapsed

Expected Behavior

The tooltip should’nt be shown at all because the showDelay was not reached

Actual Behavior

The hide animation plays, making the tooltip briefly appearing

Environment

• Angular: 13.3.0
• CDK/Material: 13.3.0
• Browser(s): Chromium 98
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[pzywy]

Temporary fix - add this to main style file:
.mat-tooltip-hide { display: none!important; }
It hides animation so tooltip doesn’t appear on mouseleave before showDelay

[infacto]

That’s annoying. Here’s just a demo:

<mat-list>
  <mat-list-item *ngFor="let item of items" [matTooltip]="item.name">{{ item.name }}</mat-list-item>
</mat-list>

@NgModule({
  // ...
  providers: [
    {
      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
      useValue: { showDelay: 500 },
    }
  ]
  // ...
})
export class AppModule {}