Question

I have an html page full of data. Whenever the user hovers over an entry, a popup window appears (similar to a tooltip). I want this tooltip to stay in view as long as the user does not click outside of it, AND lock out other tooltips from being displayed.
My question is this: How do I “lock out” other hover events, either by using flags, or some other method, to achieve this?

EDIT:
Question with using flags: Say in my document ready I have this:

var flag = 1; 
flag = Inithoverhandler(flag); 
flag = Inithoverhandler2(flag); 

Since the hover handlers are only initialized when the page is opened, flag won’t ever get updated. What’s the proper structure for using flags as variables being passed in and out of functions?

Thanks,
Michael

Answer 1

You could use a flag, or you could test how many windows are presently visible using the :visible selector. If it’s 1, don’t show your next window.

$(".tooltip:visible").length; // how many tooltips are currently showing?
$(".tooltip:visible").hide(); // hide any visible tooltip.

As for only showing tooltips when no other is currently visible:

$(".showTooltip").click(function(){
  if ($(".tooltip:visible").length > 0) return false;
  $(".tooltip", this).show();
});

Working with:

<div class="showTooltip">
  <div class=".tooltip"><p>This is the tooltip.</p></div>
</div>