テーブルセルのjQueryツールチップ

Question

jQueryを使用してテーブルセルに簡単なツールチップを作成しようとしています。
私はこのコードを書いた：

<script type="text/javascript"> 
     $(function() { 

      $(".test").bind("mouseenter", function (e) { 
       $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY }); 
       $("#ToolTipDIv").show("slow"); 
      }); 
      $(".test").bind("mouseleave", function (e) { 
       $("#ToolTipDIv").hide("slow"); 
      }); 
     }); 

    </script> 
<div id="ToolTipDIv" style="background-color: Yellow; display: none; width: 20%;"> 
     This is a text 
    </div> 
    <table class="style1" border="1"> 
     <tr> 
      <td class="test"> 
       1 
      </td> 
      <td class="test"> 
       6 
      </td> 
     </tr> 
     <tr> 
      <td class="test"> 
       2 
      </td> 
      <td class="test"> 
       7 
      </td> 
     </tr> 
     </table> 

をしかし、期待どおりに動作しません。私がマウスの上にマウスを持ってくると、ツールチップディビジョンが閉じられ、何度か開いた。
たとえば、3番目のセルのツールチップを表示したいマウスポインタを1番目と2番目のセルに移動する3番目のcell.jQueryに移動するツールチップは3回表示と非表示になります。
jsfiddle link

Answer 1

。私の提案はまず、マウスセンターなどを具体的に記述するのではなく、jqueryのホバーを使用し、プラグインの嫌疑を調べることです。あなたの問題を修正するには、ポップアップdivの位置を絶対値に設定する必要があります。

Answer 2

私のアドバイスは、ツールチップがすぐに表示されますが、（ユーザーにはあまり妨害）速く消えることができるということです。だからあなたのコードは次のようになります。

$(function() { 
    $(".test").bind("mouseenter", function (e) { 
     $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY }); 
     $("#ToolTipDIv").show('normal'); 
    }); 
    $(".test").bind("mouseleave", function (e) { 
     $("#ToolTipDIv").hide(); //Note I removed 'slow' 
    }); 
}); 

そして、あなたのtooltip要素にposition: absolute;スタイルを追加します。

私はあなたのフィドルを更新しました：http://jsfiddle.net/DmnMQ/3/、それは正常に実行されています。

これが役に立ちます。乾杯する

Answer 3

なぜ、あなたはもっと簡単なので、以下のリンクにあるtiptip jqueryプラグインを使用しないでください。

http://code.drewwilson.com/entry/tiptip-jquery-plugin

あなたはそうのようなスパン内のコードをラップし、プラグインは、残りの世話をさせることができます。車輪を再発明することはできません。あなたの新しいdiv要素がポップアップし、あなたのマウスは、新しいdiv要素は、あなたは、もはや古い場所でホバリングしている「中」であるときためです

<td><span class="tiptipClass" title="your tooltip text here">1</span></td>