[BUG] Tooltip popover overlay other tooltip, enter and leave delays not working correctly

[adamro7]

Detailed description

Tooltip popovers overlays other tooltip popover.

https://github.com/carbon-design-system/carbon-components-angular/assets/2742661/c9329c9e-f6fa-4cdc-834f-7757b1463f16

It's bug related to tooltip component. In React it works as expected.

Expected behaviour:

https://github.com/carbon-design-system/carbon-components-angular/assets/2742661/8c9d4943-f0b2-407f-af26-83924fcc3f18

Will prepare a fix for that.

Steps to reproduce the issue

Add second tooltip in storybook and try to navigate over them. You will see that popover overlays.

[adamro7]

Checked React code and problem is the same. If leaveDelayMs is higher than enterDelayMs tooltips will overlap. There is no functionality to hide other tooltips. Is there any reason why enterDelayMs = 100, but leaveDelaysMs = 300 by default? It's quite annoying to override it for example when using many IconButtons.

[Akshat55]

Not sure, we actually followed the react implementation on this one. I wasn't able to find anything on carbondesignsystem as well, it may be added for accessibility perhaps?

[Licen-it]

So i found out why they implemented that way: it's because otherwise if you were triggering another tooltip passing with the mouse over the tooltip message you just triggered, it would end up in a display hide loop.

eg:

• put your nodes with the tooltip one below the other (you need more than 2)
• then configure the tooltip to appear on bottom and give the same enter and leave delay
• now trigger the top tooltip with the mouse and move the mouse down till the last tooltip

I think i have a better fix for this. I'll create a PR

[github-actions[bot]]

:tada: This issue has been resolved in version 5.24.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: