jQuery UI工具提示加载并延迟显示
该站点有带有动态内容的工具提示的链接。我正在使用jquery UI工具提示来显示它们。我不希望每次用户不小心将光标放在链接上时，都显示工具提示。我想要显示工具提示只有当它延迟光标在链接上几秒钟。这应该像Gmail一样，当你悬停在发件人的名字上时，你会看到关于他的信息（见图）。
我需要工具提示，用户可以与之交互，所以我使用了这段代码（感谢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(); })
}
);
}
});
这里的示例（当鼠标悬停在带有工具提示的元素上时，您可以看到所有这些乱七八糟的东西）
如何做得更好？使用超时？或者我应该使用hoverIntent插件？但它将如何编码？
共有1个答案
下面是一种方法：
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://jsfidle.net/4sskc/
-
我正在使用tippy.js生成工具提示。一切都很好，但我有分配的工具提示每个不同的图像内容加载。为了减少加载时间，我想在工具提示可见时将图像延迟加载到apear。 我知道tippy.js有一个内置函数来调用AJAX内容（https://atomiks.github.io/tippyjs/ajax/）-但是我想要加载的内容是超文本标记语言，我不想为每个工具提示编写单独的javascript。理想情况
-
我试图在qtip中的图像上显示jQuery UI工具提示。现在，工具提示显示在工具提示后面。你知道怎么把它展示在它面前吗？ 小提琴在这里：http://jsfiddle.net/wYM2Q/ 将鼠标移到文本“bind qtip to this”上。然后将鼠标悬停在qtip内的图像上。你会看到qtip后面显示的工具提示，我想在它前面显示。
-
我正在使用JSF2。0和PrimeFaces3。1和3。1用于业务逻辑。我试图使用DataTable—延迟加载。但它给了我以下的错误。请帮忙。 发生错误：
-
问题内容： 我有一个进度div，其绝对位置位于网页顶部。 当我单击Ajax.ActionLink时，有时在请求/响应时间不多时，它会在顶部闪烁。 如何添加延迟，以便进度条在500ms内不显示？ 谢谢 这是工作代码 AjaxOptions 问题答案： 您将需要自己处理。 您可以通过指定（show it）和（hide it）事件的函数来处理加载元素的显示/隐藏，而不是指定a 。 有关的更多详细信息，请
-
我在玩JavaFX的< code>Tooltip。我意识到对我个人来说，悬停在某个东西上和工具提示实际出现之间的延迟太长了。从API中可以看出: 通常，当鼠标移动到控件上时，工具提示被“激活”。工具提示从“激活”到实际显示之间通常会有一些延迟。细节（如延迟量等）留给皮肤实现。 经过进一步调查，我无法找到任何控制延迟的可能性。JavaFX CSS Reference没有关于延迟时间的信息，的运行时评
-
描述 (Description) 延迟加载可应用于图像，背景图像和淡入效果，如下所述 - 对于图像 要在图像上使用延迟加载，请按照给定的步骤进行操作 - 使用data-src属性而不是src属性来指定图像源。 将类lazy添加到图像。 <div class = "page-content"> ... <img data-src = "image_path.jpg" class = "l