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) {}
});
Tooltips can be attached to any element. To display tooltips, just add title attribute to input elements and title attribute value will be used as tooltip. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element.
The tooltip position is specified with two different configuration properties: position and offset . The position property specifies the position in relation to the trigger element. For example, a value of 'bottom center' will place the tooltip on the bottom edge of the trigger, centered horizontally.
The jQuery UI tooltip() method adds tooltip to any element on which you want to display tooltip. It gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility. Syntax: You can use the tooltip() method in two forms.
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.]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With