Question

我有一个非常大的HTML页面，企业用户在批量更新/验证过程中显示数千个数据库记录。

在页面中，我需要为许多元素添加工具提示。以前我们在<head>：

中使用了可靠的方法

$("elementID").mouseenter(function(){
    // tool tip logic
    // goes here
});

问题是这会增加数万行JavaScript并导致大量性能问题。所以，我正在研究在元素级别应用它的差异。因此，我没有为每个需要工具提示的元素提供上述代码，而是声明一个这样的脚本块：

function ShowTooltip(ctrl, tooltip) {
    var o = $(ctrl).offset();
    var y = o.top;
    var x = o.left;
    $("#ttfloat").css({ top: o.top, left: o.left });
    $("#ttfloat").html(tooltip);
    $("#ttfloat").show();
}

function HideToolTip() {
    $("#ttfloat").hide();
}

然后使用以下方法为每个元素触发：

<div id="ttfloat">&nbsp;</div>
<p>Tool tip <span id="lbl1" runat="server" onmouseover="ShowTooltip(this, 'Tip Text');" onmouseout="HideToolTip();">appears here</span></p>

问题是，当鼠标悬停在<span>元素上时，浏览器会反复触发onmouseover，因此工具提示元素会闪烁。我读到其他SO解决方案，JQuery mouseenter是解决这个问题的方法，但只能找到连接头部事件的示例。它可以在元素中在线完成，还是有更好的方法？该解决方案必须适用于较旧的浏览器并符合标准。

请参阅JSFiddle

Answer 1

这样的事情怎么样：

<span data-tooltip-text="Tip text here">blah blah</span>

然后：

$("[data-tooltip-text]").on({
    mouseenter : function() {
      var o = $(this).offset();
      var tooltip = $(this).attr("data-tooltip-text");
      $("#ttfloat").css({ top: o.top, left: o.left })
                   .html(tooltip)
                   .show();
    },
    mouseleave : function() {
      $("#ttfloat").hide();
    }
});

演示：http://jsfiddle.net/szCU2/2/

我建议你稍微偏移工具提示的垂直位置，这样它就不会完全覆盖你正在盘旋的元素（看起来很笨，并且可能会导致鼠标事件，因为然后将鼠标放在工具提示上：

o.top + 18; // or whatever offset works for you

演示：http://jsfiddle.net/szCU2/3/

Answer 2

如果所有行为都相同，则应使用类选择器而不是id选择器，只需将该类添加到所有div中。然后你只需要一次代码，而不是每个div都有一个副本。将数据存储在有用的地方（比如div的自定义属性），并在代码中使用它。

HTML：

<div id="blah" class="divWithTooltip" data-custom-attribute="some tooltip text">

的javascript：

$('.divWithTooltip')
    .on('mouseenter', function() {
      someMethodToDoYourTooltipStuff( $(this).attr('data-custom-attribute') );
    })
    .on('mouseout', function() {
       someMethodToHideYourTooltip();
    });

JQuery在元素级别内联再现onmouseenter逻辑

2 个答案: