JQuery UI Tooltip Mausschwebeverzögerung?

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); 
     }); 
    } 
}); 

Angenommen, ich habe das obige Skript, das Tooltips anzeigt, wenn Benutzer den Mauszeiger über eine Tooltip-Objekt-Verknüpfung bewegen. Momentan funktioniert die QuickInfo gut, aber wenn ein Benutzer seine Maus schnell über eine Reihe von Links bewegt, rufen sie alle das Skript /resources/generate_tooltip.php auf, auch wenn sie nie angezeigt werden.

Wie würde ich dem Tooltip eine Verzögerung hinzufügen, so dass ein Benutzer die Maus für eine bestimmte Zeit auf dem Tooltip-Objekt halten muss, bevor der Tooltip generiert wird?

Answer 1

UPDATE: Sie können etwas wie dies versuchen. Statt Alarm machen Sie Ihren Ajax Anruf.

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

In Ihrem content:function(callback) {, fügen Sie überprüfen, ob keine der Tooltips mit dieser ausgelöst wird:

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

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