2

非常に大きな HTML ページがあり、エンタープライズ ユーザーがバッチ更新/検証プロセスの一部として数千のデータベース レコードを表示しています。

ページ内の多くの要素にツールチップを追加する必要があります。以前は、 でこれを行う信頼できるアプローチを使用していました<head>。

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

問題は、これにより数万行の JavaScript が追加され、大規模なパフォーマンスの問題が発生することです。そこで、代わりに要素レベルでこれを適用することの違いを研究しています。したがって、ツールチップを必要とする各要素に対して上記のコードを使用するのではなく、次のように 1 つのスクリプト ブロックを宣言しています。

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>起動するため、ツールチップ要素がちらつくことです。onmouseoverJQuery mouseenterがこれを解決する方法であるという他のSOソリューションを読みましたが、頭の中でイベントを結び付ける例しか見つけることができません。要素内でインラインで実行できますか、それとももっと良い方法がありますか? ソリューションは、古いブラウザーで動作し、標準に準拠している必要があります。

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 に答える