JQuery UI Tooltip鼠标悬停延迟？

$(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脚本，即使它们永远不会显示。JQuery UI Tooltip鼠标悬停延迟？

如何向工具提示添加延迟，以便用户在工具提示生成之前必须将鼠标放在工具提示对象上一段时间？

来源

2017-02-23 user2827048

更新：你可以尝试类似this.indy的警报让你的ajax调用。

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'>

来源

2017-02-23 17:19:08

是，确定这是有道理的，但我会如何替换警报（“喜“）与生成工具提示内容的脚本相关联，然后将该内容放入工具提示中？ – user2827048

@ user2827048请参阅update.It可能会对您有所帮助。你可以在这里找到文档：http://api.jqueryui.com/tooltip/#option-content –

您content:function(callback) {中，添加如果没有提示的触发与此检查：

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

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

来源

2017-02-23 18:02:01

JQuery UI Tooltip鼠标悬停延迟？

回答

相关问题