jQuery fadeIn fadeOut (or show/hide) issue

Question

I'm trying to show a tooltip when you hover your mouse on a day in a calendar control.

I'm using the mouseenter/mouseleave event to fadeIn/fadeOut respectively. This works.

However, my problem is since it's a calendar, there will be many days and when I'm moving my mouse across the whole week, the fadeIn/fadeOut (or show/hide) will all happen in sequence, until all events are completed... there is some sort of lag because they are happening all in sequence.

What would be the best way to prevent this from happening?

Answer 1

If you have a parent container around your week, you could just do the effect on that item.

Answer 2

I suggest that you handle just an event for all the week and then detect which day has been selected

Answer 3

I'd add some logic to check whether there's already a tooltip being displayed, and if so, move it and update the text.

The hard part is adding logic to make sure the fadeOut only happens if the text hasn't changed. The first thing to do is to add a small delay before fading by using setTimeout. Secondly, create a variable that you increment every time the tooltip text is updated. Finally, make sure each call to setTimeout includes a copy of the integer, and before calling the fade, check the integer hasn't changed.

Answer 4

Check out this jQuery plugin called hoverIntent... it should fix your problem.