jQuery UI Tooltip loading and show with delay
css, html, jquery, jquery-ui, tooltip
Solution
Here is one way to do it:
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);
});
Example http://jsfiddle.net/4sSkc/
Problem
The site has links with tooltips with dynamic content. I am using jquery UI Tooltip to display them. I would not want every time user accidentally holds the cursor over the link display the tooltip. I want show tooltip only if it delays the cursor over the link for a few seconds. It`s should work like in Gmail, when you hover on sender name you see info about him (see picture). I needed tooltip, which user can interact with, so i use this code (Thanks to 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 (you can see all this mess when mouse hovering on elements with tooltips) How to do it better? Use timeOut? Or maybe i should use the hoverIntent plugin? But how it will be coded?