jQuery的工具提示后续鼠标(jQuery tooltip follow mouse)

我一直在使用这个脚本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:

示出了泡沫后需要设置一些功能说超时根据鼠标位置更新气泡位置。

功能：

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： - 你可能需要调整泡的位置模式

文章来源: jQuery tooltip follow mouse