Jquery UI tooltip. Set timeout and set hover events. Freeze tooltip on mouseover

Question

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

Answer 1

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.]