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

[dricks]

Is this a regression?

• [X] 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

[rajibhasan11]

Any update on this?

[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 {}

[anton-white]

guys, please fix it.

[rajibhasan11]

Hello Angular Team!

[msch-alpgis]

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

[ctaepper]

this silly thing is blocking us from upgrading material and angular to 14.x. we are stuck with 13.2.4 :(

[rajibhasan11]

RIP mat tooltip

[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

[Alecto]

14.1.0 - the same issue! not fixed

[IgnacioHR]

I've subscribed to the topic as I want to know when this gets fixed

[gabrielpuddo]

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

[cosme-benito]

Problem still happens in version 14.2.0

[Brutusn]

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.

[AStrelkov]

14.2.1 - Regression still there!

[AStrelkov]

14.2.3 - The problem is not solved! Regression appears when the pointer moves in the vertical direction.

[crisbeto]

I don't see the issue in the docs site anymore. Are you sure that you're testing the latest code?

[tuurbo]

I still see the issue on the docs site. Here is a clip https://www.loom.com/share/314c84833a29481cae77a3d3c3c51e30

[crisbeto]

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.

[kungufli]

Are the examples on the docs website actually using the corresponding version in the code? Just asking because FWIW in my project I don't see the issue anymore after updating to 14.2.3 .

[AStrelkov]

It seems that the problem appears when the mouse pointer moves from top to down only. In other directions I don't see this regression. At least in my component with mat-table.

[rajibhasan11]

With default tooltip options I found problem that tooltip is appearing immediately without any delay however I am using below tooltip options I don't see problems in my project.

export const DesignerTooltipDefaults: MatTooltipDefaultOptions = { position: 'above', showDelay: 800, hideDelay: 500, touchendHideDelay: 1000 };

[ToniaDemchuk]

Still reproduces in 14.2.4 version when moving mouse down and leave trigger element:

[crisbeto]

This is working as expected. As of a few versions ago, we stopped closing the tooltip by default when the user hovers over it. You can turn it off using the disableTooltipInteractivity option.

[ToniaDemchuk]

Tooltip interactivity makes sense if showDelay time has reached and I left. But the issue is that showDelay time has not reached, so the tooltip should not be shown regardless where I move the mouse.

[crisbeto]

Either way, that would be a different issue from this one. Currently "interactivity" is considered as soon as the pointer enters the tooltip trigger.

[ToniaDemchuk]

Thanks for response, disableTooltipInteractivity makes the trick for me now, I will make issue later.

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