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鼠標懸停延遲？

回答

相關問題