Jquery qTip for toggle-able help layer: beforeShow problems

Question

Hello, I'm trying to implement a help layer that can be toggled on and off by clicking a help link in my page header.

I know qTip can't target live() selectors without doing some body hover trickery or something of that sort, so I assumed the easiest thing to do would be to use the beforeShow callback to test if the body has the 'help' class applied or not. Unfortunately, when I test with an alert it seems that the beforeShow function is just being called on page load and not actually 'before show' as expected. Anyone have any insights or similar past experiences?

// outside of document ready function

function checkHelpLayerStatus() {
    alert('things that make you go hmmmmm');
    if ($('body').hasClass('help')) { 
    }
    else {
        $('.tip').qtip({disable: true});
    }
}

// inside document ready function

$("#header a:contains(Help)").click(function(e) {
    $('body').toggleClass('help');
    e.preventDefault();
});

$("body th:contains(Test Tip)").addClass('tip').qtip({
    content: 'This is an active list element',
    beforeShow: checkHelpLayerStatus()
});

Thanks!!

Answer 1

Thanks for the correction, Marcel. Incidentally I made that mistake when I was just trying to be funny altering my code before posting, here. It has nothing to do with the problem.

If anyone else is having trouble with the qTip api, here's the solution.

// Help Layer
$("#help").click(function(e) {
    $('body').toggleClass('help');
    e.preventDefault();
});

$("body th:contains(Help Test)").addClass('tip').qtip({
    content: {
        text: 'Help Layer Is On'
    },
    api: {
        beforeShow: checkHelpLayerStatus
    }
});

function checkHelpLayerStatus() {
    if ($('body').hasClass('help')) { 
    }
    else {
        return false
    }
}

Specifically, the callback must be wrapped in the api: {} brackets, which IMO is not terribly obvious from the documentation.

Hope this can help someone else. Cheers.