JQuery tooltip keeps track of the mouse

Question

I used this script http://jqueryfordesigners.com/coda-popup-bubbles/

and try to use this fix to place the bubble according to where the user mouse is on the page:

$([trigger.get(0), info.get(0)]).mouseover(function (e) {
  if (hideDelayTimer) clearTimeout(hideDelayTimer);
  if (beingShown || shown) {
    // don't trigger the animation again
    return;
  } else {

   // reset position of info box
    beingShown = true;
    info.css({
      top: e.pageY,
      left: e.pageX,
      display: 'block'
    }).animate({
      top: '-=' + distance + 'px',
      opacity: 1
    }, time, 'swing', function() {
      beingShown = false;
      shown = true;
    });
}

Instead of the bubble appearing where the mouse’s e.pageY and e.pageX are located, it adds these values ​​in addition to where the trigger is located, because the bubble is located absolutely inside the relative trigger.

How can I save the bubble where is the mouse?

Answer 1

say timeout .

:

var x,y;//to track mouse positon
function UpdatePosition(){      
   $(ID_OF_BUBBLE).css({left:x+"px",top:y+"px"});         
   setTimeout("UpdatePosition()",100);
}

:

if (beingShown || shown) {
 //SETUP timeout to a function which updates bubble position
 setTimeout("UpdatePosition()",100);
return;

, :

$(document).ready(function(){
    $().mousemove(function(e){
    x=e.pageX ;
    y=e.pageY;
    });
   .......
});

PS: -