2

I am using the following code to control a pop-up menu.

var timeouts = {};
$(".item-wrapper").hover(function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 50);
},
function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.hide() }, 500);
});

Essentially what happens is when an item-wrapper icon is hovered over it display a contextual tooltip submenu.

However, when you scroll over the menu very quickly numerous tooltips stay visible (as they take 500ms to disappear). I want to change the code so that only the current relative tooltip is visible.

I thought this could be achieved by using $(".tip").hide() somewhere but I'm not sure where to put it.

Any help appreciated.

Sam
  • 89
  • 1
  • 5
  • I think, for example, if you wanted to hide an element named ".tip", you could place it in OnMouseLeave (i'm not sure if thats the correct one, but you get the jist..) - Just do a google search for that, and you'll see that it can be as simple as calling a function when a certain event has occured (like when the mouse leaves a menu item). – βӔḺṪẶⱫŌŔ Apr 18 '11 at 01:40

1 Answers1

0

Add a class to active tip. Before showing the next, get the size of active class, and hide it

var timeouts = {};
$(".item-wrapper").hover(function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if(!el.hasClass('active') && $('.active').size() > 0)
    $('.active').removeClass('active').hide();
el.addClass('active');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 50);
},
function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.hide() }, 500);
});
Ortiga
  • 8,455
  • 5
  • 42
  • 71
  • Looks good but when I apply that code, none of the tooltips popup. – Sam Apr 18 '11 at 02:04
  • I shouldn't call .removeClass() on the mouseleave (the second parameter of hover), because the class was being removed before the second hover call. So, $('.active').size() was alway zero. I'll now fix my answer. Here's the fiddle: http://jsfiddle.net/QTAnQ/4/ – Ortiga Apr 18 '11 at 02:40
  • Andre, that definitely works now. However, this new change has made it so that when you hover off the current tooltip and back onto it it will "blink" (disappear and then reappear). Previously, it was coded so that the user could hover off the tooltip and still have 500ms to hover back onto it before it disappeared. – Sam Apr 18 '11 at 03:12
  • Ok, I added a minor change in there to check if the el is the one who have the class active. – Ortiga Apr 18 '11 at 11:24
  • Hi andre, thanks for all the hard work - but where is this coding change? Can you throw it in a jFiddle for me :) – Sam Apr 18 '11 at 23:10
  • The change was on this line `if(!el.hasClass('active') && $('.active').size() > 0)`. Here's the fiddle http://jsfiddle.net/QTAnQ/6/. – Ortiga Apr 18 '11 at 23:35
  • Perfect. Cheers for all the help mate! – Sam Apr 19 '11 at 04:32