Question

I’m trying to have ‘help’ tooltips which appear when you click on labels of certain class, and go away when you click away. Nothing appears. I can set breakpoints in firebug and see the ‘loading’ tooltip, and then when the ajax returns the tooltip updates correctly, then removeTooltip gets called phantomly (stack trace just says F() F() in jquery). So the tooltip gets set and removed so fast that it’s never seen.

HelpText.removeTooltip = function() {
    $('#activeHelpTip').remove();
    $('body').unbind('click', HelpText.removeTooltip);
}

HelpText.initToolTip = function(clickedElement) {
    $('body').click(HelpText.removeTooltip);
    $(clickedElement).append('<span id="activeHelpTip" class="helpTip">Loading help...</span>');
}

HelpText.updateTooltip = function(helpString, clickedElement, methodName) {
    if (helpString == null) { helpString = "Help text has not been defined for selected field"; }
    $('#activeHelpTip').html(helpString);
}

$(document).ready(function() {
    $('.helpText').click(function() {
        var helpRequested = $(this).html();
        var path = window.location.pathname;
        var fullPage = path.substring(path.lastIndexOf('/') + 1);
        var page = fullPage.substring(0, fullPage.indexOf('.'));
        var label_helpRequested = $(this).html();

        HelpText.initToolTip(this);
        HelpText.getHelpText(page, label_helpRequested, this);
    });

HelpText.getHelpText = function(pageNameParam, fieldNameParam, element) {
    var params = { pageName: pageNameParam, fieldName: fieldNameParam };

    if (this._webRequest) {
        // abort the previous web service call if we 
        // are issuing a new one and the previous one is 
        // active.
        this._webRequest.get_executor().abort();
        this._webRequest = null;
    }
    // this._webRequest is a handler on the async request
    this._webRequest = Sys.Net.WebServiceProxy.invoke(HelpTextServiceURL,
                                                "GetHelpText",
                                                false, /* use GET  */
                                                params, /* parameters to the Ajax service method - case and type sensitive */
                                                HelpText.updateTooltip, /* success callback */
                                                null, /* failure callback */
                                                element); /* user context - preserved info - accessed in the success callback - in this case will contain SPAN */
}

Answer 1

Your initToolTip function sets an on-click handler for the entire body of the page to call removeToolTip(). I imagine that what is happening is that when the click event fires on $('.helpText'), the tooltip is added, and then the click event bubbles up to the body element, at which point removeToolTip() is being called.