I've googled about 2 days and can't figure out how to set timeout for http://api.jqueryui.com/tooltip/ ???
Maybe i should use jquery hoverIntent ?
here is my code
$('*[class*="help_"]').tooltip({
open: function(e,o){
$(o.tooltip).mouseover(function(e){
$('*[class*="help_"]').tooltip('open');
});
$(o.tooltip).mouseout(function(e){
});
},
close: function(e,o) {}
});
I also looked for a similar solution, showing the tooltip normally, but when mouseover on the tooltip it should stay (the content of a tooltip is some buttons).
I don't want a whole framework(qtip) to do just that, i'm already using jqUI all over my site.
so i did this:
$( document ).tooltip({
show: null, // show immediately
items: '.btn-box-share',
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(); })
}
);
}
});
I have a good solution, inspired by a jQuery forum thread :
var mouseLeaveTimer;
$('.selector').tooltip(
open: function(){
// make sure all other tooltips are closed when opening a new one
$('.selector').not(this).tooltip('close');
}
}).on('mouseleave', function(e){
var that = this;
// close the tooltip later (maybe ...)
mouseLeaveTimer = setTimeout(function(){
$(that).tooltip('close');
}, 100);
// prevent tooltip widget to close the tooltip now
e.stopImmediatePropagation();
});
$(document).on('mouseenter', '.ui-tooltip', function(e){
// cancel tooltip closing on hover
clearTimeout(mouseLeaveTimer);
});
$(document).on('mouseleave', '.ui-tooltip', function(){
// make sure tooltip is closed when the mouse is gone
$('.selector').tooltip('close');
});
[Update:Amit Added a gist for the above solution with fixes.]
I like this for setting the timeout:
$(document).tooltip({
open: function(event, ui) {
ui.tooltip.delay(5000).fadeTo(2000, 0);
}
});
Tried this?
$( ".selector" ).tooltip({ show: { duration: 800 } });
This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip. Part of the code comes from Antonimo.
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
<a href="#" class="tooltip" data-description="That's what this widget is">Test</a>
Sample: http://jsfiddle.net/A44EB/123/
A variant on the response from @naveen. This has a duration, but with jQuery UI easing doesn't show at all until past half the duration (400ms in this case of 800ms). If the user doesn't keep the mouse hovered, this functions like hover intent since the tooltip would never be available. Simple, elegant way to fix the problem.
$( ".selector" ).tooltip({ show: { easing: "easeInExpo", duration: 800 } });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title> dynamic jquery ui tooltip </title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
#listing {
margin-left: 50px ;
}
.ui-tooltip {
background: #AAABBB ;
-webkit-box-shadow: 0 0 10px #aaa;
box-shadow: 0 0 10px #aaa;
}
body .ui-tooltip {
border-width: 4px;
}
</style>
</head>
<body>
<div id="listing">
<div class="item-heading" id="item-1" > link-1 </div>
</br>
</br>
<div class="item-heading" id="item-2"> link-2</div>
</div>
<script>
// courtesy of: http://stackoverflow.com/a/15014759/65706
// and : http://stackoverflow.com/a/23487435/65706
$(document).tooltip({
items: ".item-heading"
// set static content to the tooltip
// , content: '<p> <a href="http://www.google.com"> go to google </a>'
// or
// set a dynamic content based on the selected element id
, content: function() {
//attribute title would do it as well for non html5
//also any custom attribute name would do it for html5
var el_id= $(this).attr('id');
var id=el_id.split('-')[1];
var d_link = "http://www.somesite.com/page.php?id=" + id ;
d_link = "<p><a href=\"" + d_link + "\"> go to link " +
id + " </a></p>" ;
return d_link ;
}
, open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 4 }, "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(); })
}
);
}
});
</script>
</body>
</html>
