jQuery infobulle suivi souris

Question

Je me sers de ce script http://jqueryfordesigners.com/coda-popup-bubbles/

et d'essayer d'utiliser ce correctif pour positionner la bulle selon l'endroit où la souris de l'utilisateur se trouve sur la 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; 
    }); 
} 

Au lieu de la bulle apparaissant là où sont les e.pageY et e.pageX de la souris, elle ajoute ces valeurs en plus de l'endroit où se trouve le trigger, car la bulle est positionnée absolument à l'intérieur du trigger relatif. Comment puis-je conserver la bulle là où se trouve la souris?

Une fois la bulle affichée, vous devez définir une fonction, par exemple timeout, pour mettre à jour la position de la bulle en fonction de la position de la souris.

Answer 1

fonction:

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

vous pouvez insérer ici:

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

ajouter crochet déplacer la souris pour obtenir la position:

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

PS: - vous pouvez avoir à modifier la position mode de la bulle