jQuery 工具提示跟随鼠标

【问题标题】：jQuery tooltip follow mousejQuery 工具提示跟随鼠标
【发布时间】：2009-08-14 17:56:33
【问题描述】：

我一直在使用这个脚本 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 所在的位置，而是将这些值添加到触发器所在的位置，因为气泡绝对位于相对触发器的内部。

如何让气泡保持在鼠标所在的位置？

【问题讨论】：

标签： jquery html css tooltip

【解决方案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:- 你可能需要调整气泡的位置模式

【讨论】：