0

アンカー タグで mouseenter イベントを実行すると、ツールチップが表示され、mouseleave でツールチップが非表示になります。これは正常に機能します。

しかし、複数のアンカータグからマウスをすばやく移動すると(複数のajaxリクエストが発生します)、マウスがアンカータグ上にない場合でも最後のツールチップが非表示になりません(基本的に、マウスが最後に入力したアンカータグのツールチップ) ajax リクエストの完了)

私がやったことの説明:

mouseenter イベントのアンカー タグにツールチップを表示する必要があります。
したがって、アンカー タグに関連するツールチップの詳細を表示するために (アンカー タグはテーブルの ID のリストです)、div 内に id(tooltipWindow) を追加しました

<div id='tooltipWindow'> </div>

そのため、アンカー タグの mouseenter で、次のように ajax リクエストを送信します。

$(document).ready(function(){
  $(td a).live('mouseenter', function(e){
  $.ajax({
    url: controller/action,
    data: $(this).text(),
    dataType: script,
    success: function(){
      calculate xposition ad ypostion and set the postion of tooltip
    }
  });
});

});

そしてjs.erbファイル(ruby on rails)で

$(#tooltipWindow).show();
$(this).html(<%= partial template which is shown in tooltip by passing locals %>);

mouseleave イベントでは、ツールチップを非表示にして div を空にするだけです。

$(td a).live('mouseleave', function(){
  $(#tooltipWindow).hide();
  $(#tooltipWindow).empty();
});

mouseleave を mouseout に置き換えようとしましたが、うまくいきませんでした。

どんな助けでも大歓迎です。

4

1 に答える 1