JQuery UIツールチップマウスのホバーの遅延？

Question

$(document).tooltip({ 
    items:'.tooltip-object', 
    tooltipClass:'preview-tip', 
    position: { my: "left+15 top", at: "right center" }, 
    content:function(callback) { 
     $.get('/resources/generate_tooltip.php', { 
      id:$(this).data("tooltipid") 
     }, function(data) { 
      callback(data); 
     }); 
    } 
}); 

私は、ユーザーがツールチップ - オブジェクトリンクの上にカーソルを置いたときにツールチップを表示する上記のスクリプトを持っているとします。ツールチップの表示はうまくいきますが、ユーザーがマウスを複数のリンクに素早く移動させると、表示されなくても/resources/generate_tooltip.phpスクリプトが呼び出されます。

ツールチップが生成される前に一定の時間、ツールチップオブジェクトにマウスを置かなければならないように、ツールチップに遅延を追加するにはどうすればよいですか？

Answer 1

更新：アラートのthis.insteadのようなものを試すことができますあなたのajax呼び出しを行います。あなたのcontent:function(callback) {インサイド

var timeout;var counter=0; 
 
$(function() { 
 
$(".selector").tooltip(); 
 
}); 
 
$(".selector").hover(function(e){ 
 
var $this=this; 
 
if (!timeout) { 
 
    timeout = window.setTimeout(function() { 
 
     timeout = null; 
 
     $($this).tooltip("option", "content", "Awesome title!"+(counter++)); 
 
    }, 1000);//delay of 1 second 
 
}},clearIt); 
 
function clearIt() { 
 
if (timeout) { 
 
    window.clearTimeout(timeout); 
 
    timeout = null; 
 
} 
 
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<input title="hi" class='selector'>

Answer 2

、ツールチップがどれもこれでトリガーされていない場合はチェックを追加します。

if ($(".your-tooltip-class").length == 0) { 

$.get('/resources/generate_tooltip.php', { 
      id:$(this).data("tooltipid") 
     }, function(data) { 
      callback(data); 
     }); 
}