IE-only mouse event issue when mouse button held down

Question

The following jQuery code is being used to display tooltips on various form textbox (input type='text' title='tooltip text') elements. It works, apart from in one specific scenario, in IE (7-9) only.

function toolTip() {
    var xOffset = 10;
    var yOffset = 20;

    $(".tooltip")
        .each(function () {
            this.tooltipText = this.title;
            $(this).removeAttr("title");
        })
        .mouseenter(function (e) {
            $("body").append("<p id='tooltip'>" + this.tooltipText + "</p>");
            $("#tooltip")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px")
                .fadeIn("fast");
        })
        .mouseleave(function () {
            $("#tooltip").remove();
        })
        .mousemove(function (e) {
            $("#tooltip")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px");
        });
}

That scenario is as follows:

• Mousedown in a textbox
• Move the mouse out of the text box tooltip continues to display
• Release the mouse button tooltip stays visible after the mouse button is released

The problem is caused by various mouse events firing when the mouse is moved over other elements, apart from a final mouseleave when the mouse button is released. See a working demo at http://jsfiddle.net/richev/VXUS9/8/. Any thoughts on what's going on here?

Update

This issue also exists in IE on the Bassistance jQuery tooltip.

Answer 1

Here is an interim solution while you figure out mouseevents. Basically it checks whether the target is in fact the input before executing the mouseenter code:

http://jsfiddle.net/LCefq/1/

function toolTip() {
    var xOffset = 10;
    var yOffset = 20;

    var tooltipElems = $(".tooltip");

    tooltipElems.each(function() {
        this.tooltipText = this.title;
        $(this).removeAttr("title");
    });

    tooltipElems.mouseenter(function(e) {
        if ($(e.target).is('.tooltip')) {
            $("body").append("<p id='tooltip'>" + this.tooltipText + "</p>");
            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
            $('#state').append("<div>mouseenter" + $(e.target)[0].tagName +"</div>");
        }
    }).mouseleave(function() {
        $("#tooltip").remove();
        $('#state').append("<div>mouseleave</div>");
    });

    $(".tooltip").mousemove(function(e) {
        $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
}

$(document).ready(function() {
    toolTip();
});

My results from the following test (IE8) look like this, although evidently you are getting different results.