jQuery: hover menu - code cleanup - keep menu open

Question

I've searched SO and this question seems to have been asked multiple times, but I can't seem to get it to work in my example.

Here's some code to play with: http://jsfiddle.net/vol7ron/w8QsZ/2/

What I'm looking for is something similar to the to the flowplayer tooltip, where:

• there's a trigger that causes the menu to appear when hovered
• the menu disappears on leaving the trigger
• if the user hovers over the menu (or tooltip), then the popup should stay open

My guess is that the trigger's hoverOut should call the disappear using setTimeout() with some delay, but on the menu's mouseenter(), the timeout should be cleared.

I'm still new to jQuery and am unsure where to store the generated timeoutID and where to call it.

Note: the same menu will be used for multiple triggers.

---

Update: Okay, I have something working: here
Could someone please help me clean it up and make it more efficient. More importantly, I would like not to use globals for the timeoutID. Perhaps there's a better way to store it in the object?

Answer 1

I just did something like this recently. What I would do is

var timer = setTimeout(/*blah*/);
$('#my_selector').data('timer') = timer;

I throw the timeoutID in the data for that element and then whenever I need to do something with it later (clearTimeout) I can just grab it from there.

note I used this method and it worked for a dynamic amount of elements, which is what I think you want. Just let me know if you need more of an explanation!