Question

I’m using the jquery cluetip plugin to display a detailed tooltip. I had the issue described in the following question and followed the advice of the accepted answer:

Close a cluetip when the mouse is off of the link

This is the code that I’m using:

if (opts.mouseOutClose) {
    var closectip;
    $cluetip.hover(function() {
    clearTimeout(closectip);
    },
    function() {
    $closeLink.trigger('click');
    });
    $this.hover(function() {
    clearTimeout(closectip);

    }, function() {
    closectip = setTimeout(cluetipClose, 1000);
    });
} 

This is supposed to hide the cluetip a second after mousing out. This works the first time I view and mouse out of a cluetip – but when I view cluetips subsequently it hides the tip after 1 second even when not mousing out. Debugging revealed that the following code is not working properly:

$this.hover(function() {
    clearTimeout(closectip);
}

This is supposed to ensure that the timeout is cleared when we hover again over a cluetip element, so that it will not be hidden after a second. However, when the hover function is executed, the “closectip” timeout variable is undefined.

How can I make the closectip timeout variable global, so that I can access and clear it from the hover event?

Answer 1

Here’s a description of javascript global variables…

http://snook.ca/archives/javascript/global_variable

All you need to do is get rid of the variable declaration, declare it outside all functions, or declare (and refer to it as) window.closectip