components: 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:

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 38
Comments: 27 (4 by maintainers)

Commits related to this issue

fix(material/tooltip): avoid problem when triggers hide animation for not visible tooltip Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not visible too... — committed to volvachev/components by deleted user 2 years ago
fix(material/tooltip): avoid problem when triggers hide animation for not visible tooltip Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not visible too... — committed to volvachev/components by volvachev 2 years ago
fix(material/tooltip): avoid problem when triggers hide animation for not visible tooltip Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not visible too... — committed to volvachev/components by volvachev 2 years ago
fix(material/tooltip): avoid problem when triggers hide animation for not visible tooltip Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not visible too... — committed to volvachev/components by volvachev 2 years ago
fix(material/tooltip): avoid problem when triggers hide animation for not visible tooltip (#24652) Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not vi... — committed to angular/components by volvachev 2 years ago
fix(material/tooltip): avoid problem when triggers hide animation for not visible tooltip (#24652) Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not vi... — committed to angular/components by volvachev 2 years ago
fix(material/tooltip): avoid problem when triggers hide animation for not visible tooltip (#24652) Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not vi... — committed to angular/components by volvachev 2 years ago
fix(material/tooltip): animations running when timeouts haven't elapsed After the tooltips were switched to CSS animations, a regression was introduced where the opposite animation is shown even if t... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): animations running when timeouts haven't elapsed (#25699) After the tooltips were switched to CSS animations, a regression was introduced where the opposite animation is shown ... — committed to angular/components by crisbeto 2 years ago
fix(material/tooltip): animations running when timeouts haven't elapsed (#25699) After the tooltips were switched to CSS animations, a regression was introduced where the opposite animation is shown ... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): animations running when timeouts haven't elapsed (#25699) (#25701) After the tooltips were switched to CSS animations, a regression was introduced where the opposite animation ... — committed to angular/components by crisbeto 2 years ago
fix(material/tooltip): animation not cancelled when mouseleave goes through tooltip We ignore `mouseleave` events that go into the tooltip which meant that some animations weren't being cancelled cor... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): animation not cancelled when mouseleave goes through tooltip (#25740) We ignore `mouseleave` events that go into the tooltip which meant that some animations weren't being canc... — committed to angular/components by crisbeto 2 years ago
fix(material/tooltip): animation not cancelled when mouseleave goes through tooltip (#25740) We ignore `mouseleave` events that go into the tooltip which meant that some animations weren't being canc... — committed to angular/components by crisbeto 2 years ago
ng 14.0.0 to 14.2.4 fix tooltip bug https://github.com/angular/components/issues/24614 fix sharedRoom not emitted (modals not open) fix back to rooms button — committed to art-hck/planing-poker by art-hck 2 years ago
bug https://github.com/angular/components/issues/24614#issuecomment-1190286647 — committed to art-hck/planing-poker by art-hck 2 years ago

Most upvoted comments

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

+22

pzywy on Jul 20, 2022

That’s annoying. Here’s just a demo: 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 {}

+15

infacto on Apr 13, 2022

guys, please fix it.

anton-white on Jun 25, 2022

Any update on this?

rajibhasan11 on Apr 9, 2022

Problem still happens in version 14.2.0

cosme-benito on Sep 1, 2022

You can even use the official demos to demonstrate the bug:

msch-alpgis on Jun 27, 2022

it stil happens on the example page. https://material.angular.io/components/tooltip/overview#show-and-hide-delays

Set hide delay to zero. If that is not done, it looks at first it doesn’t happen… but after a few tries it does.

Brutusn on Sep 6, 2022

14.2.1 - Regression still there!

AStrelkov on Sep 15, 2022

14.1.0 - the same issue! not fixed

Alecto on Jul 28, 2022

Okay, I see. The cases I was testing for was when there’s no enter delay and a hide delay, and the opposite way around.

crisbeto on Sep 29, 2022

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

for now, this works for sure. thanks

gabrielpuddo on Aug 1, 2022