Question

Finally my first -hopefully- easy question.

I’m writing a tool for my clients, I plan to explain how to use it when I give them their access info, but just in case, I have pop-up “tooltips” to help them out.

I’m trying to put in a type of tutorial that will go through the elements on the page, pop-up their tool-tip, then go to the next element after a short delay (obviously hiding the element first)

Here’s what I’ve got:
“#show-help” is my button, “.hashelp” means the class has a tool-tip, “.help” is the actual tool tip.
Right now it’s highlighting all the “.hashelp” elements, but not showing me my tool-tips. I’m using “i” to incrementally delay each step.

$("#showhelp").click(function(){
         var i = 0;
            $(".hashelp").each(function(){
                $(this).find(".help").eq(0).css("top",$(this).offset().top +10);
                $(this).find(".help").eq(0).css("left",$(this).offset().left +10);
                $(this).delay(i*5000).effect("highlight", {color: "yellow"},5000);
                $(this).find(".help").eq(0).delay(i*5000).show().delay((i+1)*5000).hide();
                i++;
         });
    });

Any help would be great!

Answer 1

Your problem is with your use of delay(). Unfortunately, it only works with jQuery’s animation effect framework. This is explained explicitly in the delay() API docs¹:

Only subsequent events in a queue are delayed; for example this will
not delay the no-arguments forms of .show() or .hide() which do not
use the effects queue.

So there’s a few options on how to handle it. The easiest (if maybe a bit performance-heavy) way to fix your code is to “animate” the show() and hide() by giving them a duration of 0:

$(this).find(".help").eq(0).delay(i*5000).show(0).delay((i+1)*5000).hide(0);

But you should also keep in mind that your first delay might not work because there might not be anything on the effects queue (this is a weak area of mine, so try it out and see). You might need to toss an extra hide(0) in there to ensure something is on the effects queue:

$(this).find(".help").eq(0).hide(0).delay(i*5000).show(0).delay((i+1)*5000).hide(0);

Only do this if you find it’s necessary to make things work.

Alternatively, you can use a chain of setTimeout() calls, but that will be awkward to code, so only do it if you see performance issues.