0

以下 jQuery 代码用于在各种表单文本框 ( input type='text' title='tooltip text') 元素上显示工具提示。除了在一种特定情况下，它仅在 IE (7-9) 中有效。

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");
        });
}

该场景如下：

  • 文本框中的鼠标按下
  • 将鼠标移出文本框工具提示继续显示
  • 释放鼠标按钮后，释放鼠标按钮工具提示保持可见

该问题是由当鼠标移到其他元素上时触发的各种鼠标事件引起的，除了mouseleave释放鼠标按钮时的最终事件。请参阅http://jsfiddle.net/richev/VXUS9/8/上的工作演示。对这里发生的事情有任何想法吗？

更新

此问题也存在于 IE 中Bassistance jQuery tooltip上。

4

1 回答 1

1

这是您找出鼠标事件时的临时解决方案。基本上它在执行 mouseenter 代码之前检查目标是否实际上是输入：

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();
});

我的以下测试（IE8）的结果看起来像这样，尽管显然你得到了不同的结果。

在此处输入图像描述

于 2012-11-13T10:35:33.033 回答