Show/Hide With Hide On Click Anywhere

I have a div that acts as a tooltip, and a link to show this tooltip. This part works fine.

Solution 1:

I'm no mootools expert, but I'd imagine that you need to call addEvent and removeEvent with the exact same function - not two functions that do the same thing. My guess is that mootools can't remove the click-listener because it's looking for a function that hasn't actually been registered. I.e. it's looking for function A, but the function you registered is function B. They do the same thing, but they aren't the same function.

The result is that the click-listener on the document is never removed, and instead toggles the element with every click - and a new toggle-function is added each time too. Once you've clicked a few times, clicking anywhere in the document results in the element toggling back and forth X number of times. If X is an odd number, it seems to work as expected. If it's even, it won't have any apparent effect.

Try this

function toggleTooltip(id) {
    var e = document.id(id);
    if( !e.toggleCallback ) {
        e.toggleCallback = function() { toggleTooltip(id); };
    }
    if(e.style.display=='block') {
        e.style.display='none';
        document.removeEvent('click', e.toggleCallback);
    } else {
        e.style.display='block';
        document.addEvent('click', e.toggleCallback);
    }
}

I'd also advise you to not use the onclick attribute, since you're already using mootools. Instead, set up an event listener to fire when the document has loaded. Then use that to find the elements that need toggling, and set everything up there.

Edit: Here's what I mean: http://jsfiddle.net/au32j/1/

Share