Tooltip type functionality a bit buggy

Tooltip type functionality a bit buggy

Hello all,

I have implemented a tooltip type control in my site. Basically when a user rolls over an image with the class 'friend_pic', a div with the id "members_tooltip" pops up with more information about the source of the image and when the user rolls away from the image the div gets removed. The data is retrieved via an ajax post. The tooltip pops up down and to the right of the mouse pointer and there is also a function to move it as the mouse moves.

This sort of works but gets buggy if you roll around the image really quickly often the div's content will disappear but the empty div stays on the page. Here is how it is coded:

  1. //display a tooltip type popup with more information about a person when you hover over their pic
  2.         $(".friend_pic").hover(function(e){
  3.             //if for some reason the tooltip is still showing, remove it.
  4.             $("#members_tooltip").remove();
  5.            
  6.             var data = "id=" + $(this).attr("id");
  7.            
  8.             $.post('members_tooltip.php',data,function(data){
  9.                
  10.                 //Create a div to hold the tooltip
  11.                 var html = "<div id = 'members_tooltip'>";
  12.                 html += "</div>";
  13.                 //append the tooltip div to the main dive
  14.                 $(container).append(html);   
  15.                 $("#members_tooltip").html(data);
  16.                   //posotion the div below and to the right of the mouse pointer
  17.                 $("#members_tooltip").css('top',e.pageY + 20);
  18.                 $("#members_tooltip").css('left',e.pageX + 20);
  19.                
  20.             });
  21.            
  22.         },function(){
  23.             //remove the tooltip when you stop hovering over the pic
  24.             $("#members_tooltip").remove();
  25.         });

  27.         //when the user moves around the picture move the tooltip with it
            $(".friend_pic").mousemove(function(e){
           
                $("#members_tooltip").css('top',e.pageY + 20);
                $("#members_tooltip").css('left',e.pageX + 20);
               
            });    





Again it only happens when the mouse is moved really quickly, and the error is often the content of the tooltip being removed but the empty div remaining. If anyone could suggest a way this could be fixed I would really appreciate it. Thanks much!

Jstall