Question

I’m using the jQuery Tooltip control, http://docs.jquery.com/Plugins/Tooltip and it works really well. However, I have a task to show the tooltip when someone types 2 characters into an autocomplete control. I have it all hooked up to do it, but I do not know how to explicitly show the jQuery tooltip plugin.

MyCompany.UI.Controls.AutoCompleteExtender = new function() {
    /// <summary>
    /// An extension of the autcomplete control.
    /// </summary>

    // Private Members
    var _this = this;

    // Public Members
    this.charsBeforeShowingTooltip = 2; // Change this value via server-side code if
                                        // clients want different values.

    this.showTooltip = function() {
        var item;

        if (this.value.length === _this.charsBeforeShowingTooltip) {
            // Explicitly show the tooltip after two characters have been entered.
            alert('show the tooltip explicitly');
        }
    }
}

And later on in server-side generated code, the following JavaScript renders to the page

$(document.ready(function() {
    $('#someClientId').bind('keyup', MyCompany.UI.Controls.AutoCompleteExtender.showTooltip);
});

Now this all works except I don’t know how to explicitly show the tooltip plugin. I’ve tried the following and none of them work:

...
        this.showTooltip = function() {
            var item;

            if (this.value.length === _this.charsBeforeShowingTooltip) {
                // Explicitly show the tooltip after two characters have been entered.
                $(this).hover(); // doesn't work
                $(this).trigger('mouseover'); // doesn't work
                $(this).trigger('mouseenter'); // doesn't work
            }
        }
...

I also tried adding the CSS class show-tooltip (got that from Google), but that didn’t work either.

Aside from modifying the plugin, is there a way to do this out of the box?

Answer 1

Well there were a couple of issues. The control that I thought had the title tag didn’t (always check the obvious first!). The title tag was actually on a table row, not the control in a table cell. OK, so that got the mouseover firing, however when I explicitly fired the mouse over event, the jQuery Tooltip plugin was throwing an error that event.pageX and event.pageY were undefined.

The reason why they were undefined was because the event was explicitly fired, so there were no X/Y coordinates being passed in the event object from the mouse. So what I did was modify the jQuery Tooltip plugin to check if these are undefined as well. If they are the offsetLeft and offsetTop properties of the helper.parent control in the Tooltip plugin are used instead.

Here is the code I modified in the Tooltip plugin:

/**
 * callback for mousemove
 * updates the helper position
 * removes itself when no current element
 */
function update(event)  {       
    // ... code omitted for clarity

    // if (event) { // This was the old check
    if (event && typeof(event.pageX) !== "undefined" &&  typeof(event.pageY) !== "undefined") {
        // ... more code omitted for clarity
    }

    // ... even more code omitted for clarity
}

Thanks again to Joern Zaefferer for creating this plugin, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip.