アンカー タグで 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 に置き換えようとしましたが、うまくいきませんでした。
どんな助けでも大歓迎です。