Question

I have a bunch of elements that trigger a tooltip on hover. The problem is that the tooltip overlaps the element, so if I mouse over the tooltip, it will effectively mouse off the element. I then end up in a situation where the tooltip fades in and out continuously as I mouse on and off the trigger. I need to somehow pause the script, so that it does not fire the second part (mouseleave), so long as I hover over the tooltip.

The kicker is this: the tooltip is not and cannot be a child element, as the trigger element is an area in an imagemap, so I cannot simply use mousenter() and call it a wrap. The entire image is covered in hotspots, so it is also possible for the mouse to travel from the area, over the tooltip, to a different area, which should then fadeOut the first tooltip, and fade the new tooltip in.

I know it has something to do with event bubbling, but that entire topic is clouded in deep mystery for me, and I’m hoping for a simple solution.

Here’s some random code pasta:

HTML:

<img src="image.png" usemap="#Map" />
<map name="Map" id="Map">
   <area shape="poly" coords="x,y,z,w" href="#tt01" />
   <area shape="poly" coords="a,b,c,d" href="#tt02" />
</map>

<div class="tooltip tt01"></div>
<div class="tooltip tt02"></div>

JS:

$("area").hover(function () {
      var i = $(this).attr("href").split("#");
      var i = "." + i[1];

      $(".tooltip").removeClass("glue");
      $(i).fadeIn();
   }, function () {
      var i = $(this).attr("href").split("#");
      var i = "." + i[1];

      $(i).hover(function () {
         $(this).addClass("glue");
      }, function () {
         $(this).removeClass("glue");
      });

      setTimeout(function () { $(".tooltip:not(.glue)").fadeOut(); }, 200);
   });

As you can see, I’ve tried toggling some classes (after toggling a custom attribute didn’t work). This works, but as soon as I move from one area, over the tooltip to a different area, or if I move from the tooltip back to the area, and onto a new area… fun things happen.

Answer 1

I spoke with the client, who wanted to be working on mobile devices as well, so what I did was to make it trigger on click instead. Much more simple, as I don’t have to worry about where the mouse travels.