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 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) {}
});

Solution 1

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(); })
        }
    );
  }
});

Solution 2

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

Solution 3

I like this for setting the timeout:

 $(document).tooltip({
     open: function(event, ui) {
         ui.tooltip.delay(5000).fadeTo(2000, 0);
     }
 });

Solution 4

Tried this?

$( ".selector" ).tooltip({ show: { duration: 800 } });

Link: http://api.jqueryui.com/tooltip/#option-show

View more solutions

Comments

[mindsupport]

Yes tried, when duration is without effect name it uses default 'fadeIn' effect, so it's just duration for fadeIn

[naveen]

@mindsupport: thats settimeout, what is your exact requirement?

[Marko D]

this helped me, though i had to remove open: part, otherwise everything was flying around

[Francis Lewis]

This was a life saver - well, ok, not quite a "life" saver, but I searched far and wide and this was the only option I found that works.

[Rob Audenaerde]

This solution works better than the one from @Antonimo, because you an actually implement a proper close method in the tooltip.

[Doug Ayers]

Awesome! I was able to use fadeIn() instead of fadeTo(400,1). Maybe something got fixed between then and now. I could also just call fadeOut( function() {..} ); without specifying the delay and it used the default fade out millis (400 also). Just FYI for anyone else trying this out. Thanks!

[Hebe]

great it works. I only needed to copy open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); }, part