Tippyjs: Is there a way to stop Delay while mouseover tooltip?

[madjennsy]

I want to know if there is a way to stop exit delay if, after mouseleave tooltip, I do mouseover tooltip before the hide() action is executed.

[atomiks]

This is already handled (or at least should be) by clearing all timeouts on show and hide. Can you link a CodePen demo?

[madjennsy]

Thanks for the quick reply. Maybe I'm missing something because it's already handled only if I do mouseleave and mouseover the element who trigger the tooltip. but If I try the same with the tooltip itself, it'll not clear the timeout and will hide after the delay while the cursor is over it. I'll do a CodePen demo.

[madjennsy]

Please check:
https://codepen.io/madjennsy/pen/ddwMqR

[atomiks]

~Not seeing anything wrong. I can hover over the tooltip and it won't close. Can you make a screenvid of it?~

Edit: nvm I see what you mean. You want to mouseleave the interactive tooltip, then hover back over and not let it close. So it's unrelated to the reference element.

[madjennsy]

If that is a bit hard to do, please let me know and I'll close the comment.

[atomiks]

It shouldn't be, I'll have to write some code to see if it is though, which I'll do when I get home 😊

[robcrocombe]

I also have this issue, looking forward to it being implemented!

[atomiks]

@robcrocombe I tried working on it a week ago and it turned out not to be that simple and stopped. Then I thought of a solution while falling asleep but forgot it by the morning, lol. I'll try to implement it this weekend. 🕊

[erata]

I also have this issue, looking forward to it being implemented!
+1

[jacquescrocker]

I'm also having this issue. Any sort of workaround would be greatly appreciated!

[jacquescrocker]

Tracing the problem for a bit...

The issue is that the tooltip itself does not generate an _enter event. If I have a hide delay, then I mouse over the target element, mouse off, then back onto the target element, it works as expected.

If I mouse over the target element, then mouse off it, then directly onto the tooltip, it closes when it hits the delay timer.

---

My Naive Suggestion: attach a mouseenter event to the Popper element that calls _enter https://github.com/atomiks/tippyjs/blob/master/src/js/core/Tippy.js#L329-L369

[jacquescrocker]

This patch fixes the problem for me:
https://github.com/jacquescrocker/tippyjs/commit/3367740147c61504773c66baeac117e5d7ed8420

It's obviously just a proof of concept, and not meant for use. Just to illustrate the approach of making sure _enter and _leave are also attached to the newly created Popper element

[atomiks]

@jacquescrocker looks good! Only issue is that causes a memory leak because you aren't cleaning the listener up - a new one is added every time you show the tooltip. You could move that code into createPopperInstance and it should still work

[atomiks]

3.0.0