jQueryのツールチップフォローマウス

Question

私は http://jqueryfordesigners.com/coda-popup-bubbles/

このスクリプトを使用して、ユーザーのマウスがページ上のどこに応じてバブルを配置するために、この修正プログラムを使用しようとしてきた：

$([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; 
    }); 
} 

の代わりにマウスのe.pageYとe.pageXのところに現れるバブルは、バブルが絶対的に相対トリガー内に配置されているため、トリガーがある場所に加えてそれらの値を追加します。

マウスのどこにバブルを維持するには？

Answer 1

バブルが表示された後、マウスの位置に応じてバブルの位置を更新するために、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's position 
setTimeout("UpdatePosition()",100); 
return; 

を位置を取得するには、マウスの移動フックを追加します。

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

PS： - あなたが位置を微調整する必要がありますバブルのモード