CODEWITHSUNDEEP
javascriptjquerytooltipfadeouttiptip
Andrew
Andrew

Reputation: 1167

delaying a jquery fadeOut

I am using a jquery plugin called tipTip (http://code.drewwilson.com/entry/tiptip-jquery-plugin). I'm using this for an ecommerce site and when the user hovers over a product image an information box appears with extra details about the product.

The default behaviour of tipTip is that the hover box disappears once the user moves their mouse off the link. You can also set keepAlive: true to require that the user moves their mouse over the hover box to make the box disappear. Neither scenario is right for me. I have links in the hover box so the user needs to be able to enter the box without it disappearing. But I also don't want the user to be required to enter the box to make it disappear. Moving off both the link and the box should make it disappear.

To get around this I've been trying to put a jquery delay() into the tipTip javascript. I've also tried using setTimeout. But I've been finding that all I can get to happen is that the hover box remains until the user moves onto another link. Whereas I'd expect delay() to mean that it disappears after the number of milliseconds I specify, irrespective of whether the user has moved onto another link.

You can see the full tipTip js code here: http://code.google.com/p/geoapps/source/browse/trunk/capstones/talha_khopekar_2012/jquery.tipTip.js?spec=svn108&r=108

I've been trying to achieve the delay by amending the last few lines. I tried adding a delay as follows:

 function deactive_tiptip(){
                                    opts.exit.call(this);
                                    if (timeout){ clearTimeout(timeout); }
                                    tiptip_holder.delay(1000).fadeOut(opts.fadeOut);
                            }

But as I said, the effect of this is that the hover box remains in place until the user moves onto another link, and activates a new hover box. I really don't understand why this is. My understanding is that the delay function should simply delay the fadeOut by 1 second, and then the fadeOut should proceed as normal.

Upvotes: 0

Views: 341

Answers (2)

Wandering Digital
Wandering Digital

Reputation: 1868

So what you really want to do is include the tooltip in the hotspot area and only deactivate when/if the user leaves both the initial item and the tooltip.

Find where the 'mouseout' event that calls the deactivate_tiptip() function exists, and add an 'add' function for the tooltip class. I don't know the architecture but it probably looks something like this:

tiptip.mouseOut(function () { deactivate_tiptip(); }; // Original
tiptip.add(".TOOLTIP").mouseOut(function () { deactivate_tiptip(); }; // Ammended

// OR:

tiptip.on("mouseOut", function () { deactivate_tiptip(); }; // Original
tiptip.add(".TOOLTIP").on("mouseOut", function () { deactivate_tiptip(); }; // Ammended

You'll have to change the '.TOOLTIP' to the correct class. This should trigger the deactivate function only when you leave both.

Upvotes: 1

Matthew
Matthew

Reputation: 61

I had some luck with this js function when trying to delay the call of another function.

window.setTimeout(function(){callFunction(params);}, 4000);

Let me know if this helps. I have a bag of tricks with js.

Regards,

Upvotes: 1

Related Questions