该站点具有带有动态内容的工具提示的链接。我正在使用 jquery UI 工具提示来显示它们。我不希望每次用户不小心将光标悬停在链接上时显示工具提示。我只想显示工具提示，如果它延迟链接上的光标几秒钟。
它应该像在 Gmail 中一样工作，当您将鼠标悬停在发件人姓名上时，您会看到有关他的信息(请参阅 picture )。
我需要工具提示，用户可以与之交互，所以我使用此代码(感谢 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(当鼠标悬停在带有工具提示的元素上时，您可以看到所有这些困惑)
如何做得更好？使用超时？或者我应该使用hoverIntent插件？但是它将如何编码？
最佳答案
这是一种方法:
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/
关于jQuery UI 工具提示加载并延迟显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21116599/