12

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) {}
});
mindsupport
  • 490
  • 1
  • 6
  • 13

7 Answers7

40

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(); })
        }
    );
  }
});
Hontoni
  • 1,332
  • 1
  • 16
  • 27
  • this helped me, though i had to remove `open:` part, otherwise everything was flying around – Marko D Mar 26 '13 at 17:50
  • 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. – Francis Lewis May 21 '13 at 06:34
  • 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! – Doug Ayers Apr 19 '15 at 19:15
  • great it works. I only needed to copy `open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); },` part – Hebe Mar 29 '21 at 04:53
7

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

Amit
  • 25,106
  • 25
  • 75
  • 116
Fabien Quatravaux
  • 3,737
  • 2
  • 27
  • 33
  • This solution works better than the one from @Antonimo, because you an actually implement a proper `close` method in the tooltip. – Rob Audenaerde Feb 04 '14 at 08:24
5

I like this for setting the timeout:

 $(document).tooltip({
     open: function(event, ui) {
         ui.tooltip.delay(5000).fadeTo(2000, 0);
     }
 });
webaholik
  • 1,619
  • 1
  • 19
  • 30
2

Tried this?

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

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

naveen
  • 53,448
  • 46
  • 161
  • 251
0

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&apos;s what this widget is">Test</a>

Sample: http://jsfiddle.net/A44EB/123/

Cuchac
  • 71
  • 1
  • 2
0

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 } });
ryanm
  • 2,239
  • 21
  • 31
0
<!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>
Yordan Georgiev
  • 5,114
  • 1
  • 56
  • 53