EDIT 17/2/14: I've tried to use the .toggle JQuery function to work around this but it doesn't seem to be working with my current set-up. I've been keeping an eye on it in Chrome's dev console and it does literally nothing when it tries to execute. Here's the updated code:

```
$(document).ready(function(){ 
$(".remove").toggle(function() { 
                 $($(this).attr("data-ref")).stop(true,true).fadeIn();
                  },
                   function() { 
                 $($(this).attr("data-ref")).stop(true,true).fadeOut();
                });
});

```

OLD:

> 
> I'm trying to get a unique tooltip to appear for each of the imagemap areas that are > hovered, however when it comes to animating them to fade or slide in, they either queue and animate one after another, clipping behind the imagemap if a lot are hovered at once, or none animate in at all. 
> 
> 
> Here's my code. I'd rather not change the mark-up:
> 
> 
> Hovering over: 1
>  Hovering over: 2
>  Hovering over: 3
>  Hovering over: 4
>  Hovering over: 5
> 
> 
> $('.remove').mouseover(function(){
>  $($(this).attr("data-ref")).show();
>  });
> 
> 
> $('.remove').mouseout(function(){
>  $($(this).attr("data-ref")).hide();
>  });
> 
> 
>