[BUG] When using the same single tooltip on a page, the delayShow/data-tooltip-delay-show is not respected

[Ville-Wennerlund]

Bug description
When using the same single tooltip on a page, the delayShow/data-tooltip-delay-show is not respected if you hover over them immediately after each other.

Version of Package
v5.28.0

To Reproduce
Steps to reproduce the behavior.

steps to reproduce in the attached stackblitz:

1. hover over "A tooltip" for 1 second
2. the tooltip is shown
3. immediately hover over "Another tooltip"

actual result: the "Another tooltip" is shown immediately
expected result: the tooltip should take 1 second before it is shown

Screenshots

react-tooltip.mp4

Desktop (please complete the following information if possible or delete this section):

• OS: Windows 11
• Browser: Microsoft Edge
• Version: 131.0.2903.51
• Frameworks: React 18.2.0

[gabrieljablonski]

Unless I'm misunderstanding your explanation, this is expected behavior, not a bug.

When you have several elements that share the same tooltip, the tooltip always stays open when quickly switching between anchors.

There's even an intentional small delay before effectively closing the tooltip, so you can "jump" small gaps (like the space between the elements in your example).

In other words, delayShow and data-tooltip-delay-show are only relevant to the tooltip from its "fully closed" state. We decided to go with this behavior because it matches more closely with what people expect when using the tooltip.

To achieve your expected behavior, you might need to use multiple tooltips (which should be fine performance-wise if you only have something like <20 elements).

[AweVic]

Hi @gabrieljablonski,

I agree with OP.

I would disagree that this is a common design pattern for tooltips.
If you want tooltips to be immediate then you set 0 delay. If you want tooltips to not be immediate then you set a delay. I don't see how these behaviours should be mixed as a "feature".

I have a complex dashboard page with many tooltips - and I don't want to be spammed with tooltips by just moving the mouse over the page after I have hovered on 1 tooltip somewhere.

Is it possible you can somehow solve this?

Thanks

[Ville-Wennerlund]

Hi!
I can have upwards to 200-400 tooltip anchors present on one page, I know this might not be best practice. I tried using one tooltip per anchor, but this resulted in extremely high rendering times, as you can imagine.

Would it be possible to add a prop that would make it so that the "fully closed" state is happening instantly on mouseLeave? Or another prop that would make this behavior function as I would like.

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.