2

我有一个非常大的 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

4

2 回答 2

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/

我建议您稍微偏移工具提示的垂直位置，这样它就不会完全覆盖您悬停在上面的元素（看起来很笨重，并且可能会导致 mouseleave 事件，因为那时鼠标是在工具提示上）：

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

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

于 2013-07-03T04:46:35.880 回答
1

如果所有这些行为都相同，则应使用类选择器而不是 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();
    });
于 2013-07-03T05:00:12.757 回答