jQuery UI工具提示加載和延遲顯示

該網站與動態內容的工具提示鏈接。我正在使用jquery UI Tooltip來顯示它們。我不希望每次用戶不小心將光標懸停在鏈接上時顯示工具提示。我只想顯示工具提示，只要它將光標在鏈接上延遲幾秒鐘。它應該像在Gmail中一樣工作，當您將鼠標懸停在發件人姓名上時，您會看到關於他的信息（請參閱picture）。jQuery UI工具提示加載和延遲顯示

我需要提示，哪些用戶可以交互，所以我用這個代碼（感謝Antonimo https://stackoverflow.com/a/15014759/274417）

$(document).tooltip({ 
    show: null, // show immediately 
    items: 'input', 
    hide: { 
    effect: "", // fadeOut 
    }, 
    open: function(event, ui) { 
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast"); 
    }, 
    close: function(event, ui) { 
    ui.tooltip.hover(
     function() { 
      $(this).stop(true).fadeTo(400, 1); 
      //.fadeIn("slow"); // doesn't work because of stop() 
     }, 
     function() { 
      $(this).fadeOut("400", function(){ $(this).remove(); }) 
     } 
    ); 
    } 
});

Example here（你可以看到，當鼠標懸停在與工具提示元素這一切混亂）

如何做得更好？使用timeOut？或者，也許我應該使用hoverIntent插件？但它將如何編碼？

來源

2014-01-14 Zhivago

你有沒有看問題的http：//計算器。 com/questions/16465744/jquery-tooltip-with-delay-on-show – Arun

是的，不是我的情況，我想。 – Zhivago

下面是做到這一點的一種方法：

HTML

<body> 
    <p><label for="age">Your age:</label><input class="age" id="age" /></p> 
    <p><label for="age">Your age:</label><input class="age" id="age2" /></p> 
    <p><label for="age">Your age:</label><input class="age" id="age3"/></p> 
    <p><label for="age">Your age:</label><input class="age" id="age4"/></p> 
    <p><label for="age">Your age:</label><input class="age" id="age5"/></p> 
</body>

jQuery的

var timeout; 
var finishTimeout = false; 
$(".age").tooltip({ 
    show: null, // show immediately 
    items: 'input', 
    hide: { 
    effect: "", // fadeOut 
    }, 
    content: function(){ 
     if(!finishTimeout) 
      return false; 
     //ajax call here 
     return 'test'; 
    }, 
    open: function(event, ui) { 
    //ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast"); 
    }, 
    close: function(event, ui) { 
    ui.tooltip.hover(
     function() { 
      $(this).stop(true).fadeTo(400, 1); 
      //.fadeIn("slow"); // doesn't work because of stop() 
     }, 
     function() { 
      $(this).fadeOut("400", function(){ $(this).remove(); }) 
     } 
    ); 
    } 
}); 
$('.age').mouseover(function(){ 
    var el = $(this); 
    timeout = setTimeout(function(){ 
     finishTimeout = true; 
     el.tooltip("open"); 
     finishTimeout = false; 
    },1000); 
}); 
$('.age').mouseout(function(){ 
    clearTimeout(timeout); 
});

例 http://jsfiddle.net/4sSkc/

來源

2014-01-14 20:23:58 Trevor

@Roman請將此答案標記爲已接受，並回答您的問題，否則請提供反饋。謝謝 – Trevor

是的，我知道這個選項，謝謝。但是，當光標懸停在一個鏈接上時，它仍然是不必要的服務器，對吧？ – Zhivago

@Roman你在哪裏指定服務器請求？ – Trevor

jQuery UI工具提示加載和延遲顯示

回答

相關問題