jQuery UI Tooltip loading and show with delay

Question

The site has links with tooltips with dynamic content. I am using jquery UI Tooltip to display them. I would not want every time user accidentally holds the cursor over the link display the tooltip. I want show tooltip only if it delays the cursor over the link for a few seconds. It`s should work like in Gmail, when you hover on sender name you see info about him (see picture).

I needed tooltip, which user can interact with, so i use this code (Thanks to Antonimo https://stackoverflow.com/a/15014759/274417)

$( document ).tooltip({
  show: null, // show immediately 
  items: 'input',
  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(); })
        }
    );
  }
});

Example here (you can see all this mess when mouse hovering on elements with tooltips)

How to do it better? Use timeOut? Or maybe i should use the hoverIntent plugin? But how it will be coded?

Have you looked at the question http://stackoverflow.com/questions/16465744/jquery-tooltip-with-delay-on-show — Arun, Jan 14 '14 at 15:14

Trevor · Accepted Answer · 2014-01-14T23:23:40.300

Here is one way to do it:

HTML

<body>
    <p><label for="age">Your age:</label><input class="age" id="age" /></p>
    <p><label for="age">Your age:</label><input class="age" id="age2" /></p>
    <p><label for="age">Your age:</label><input class="age" id="age3"/></p>
    <p><label for="age">Your age:</label><input class="age" id="age4"/></p>
    <p><label for="age">Your age:</label><input class="age" id="age5"/></p>
</body>

jQuery

var timeout;
var finishTimeout = false;
$(".age").tooltip({
  show: null, // show immediately 
  items: 'input',
  hide: {
    effect: "", // fadeOut
  },
     content: function(){
         if(!finishTimeout)
             return false;
         //ajax call here 
         return 'test';
     },
  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(); })
        }
    );
  }
});
$('.age').mouseover(function(){
   var el = $(this);
    timeout = setTimeout(function(){
       finishTimeout = true;
       el.tooltip( "open" );
       finishTimeout = false;
    },1000);
});
$('.age').mouseout(function(){
    clearTimeout(timeout);
});

Example http://jsfiddle.net/4sSkc/

Yes, i know about this option, thank you. But it still be unnecessary requests to server whenever the cursor is hover a links, right? — Zhivago, Jan 14 '14 at 22:03
@JoshHarington tooltip is not available within the standard jquery library. You need to include jQuery ui as well. See: https://jqueryui.com/tooltip/ — Trevor, Dec 08 '15 at 14:42

jQuery UI Tooltip loading and show with delay

1 Answers1