pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动

提示框相对父元素的定位，要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标

计算鼠标的页面坐标：

event.pageX

event.pageY

计算父元素的页面坐标：

首先写一个js获取元素到页面顶部和左部距离的方法

	function getElementPosition(elem){
			var elemTop = elem.offsetTop;//获得elem元素距相对定位的父元素的top
			var elemLeft = elem.offsetLeft;
			elem = elem.offsetParent;//将elem换成起相对定位的父元素
			while(elem!=null){//只要还有相对定位的父元素
				elemTop +=elem.offsetTop;//获得父元素 距他父元素的top值,累加到结果中
				elemLeft += elem.offsetLeft;
				elem = elem.offsetParent;//再次将elem换成他相对定位的父元素上;
			}
			return {
				elemTop: elemTop,
				elemLeft: elemLeft
			};
		}

参考： js中获取页面任意元素距页面顶部的总距离

参考：阮一峰的博客   用Javascript获取页面元素的位置

//获取父元素的页面坐标
var parentPosition =  getElementPosition(document.getElementById("funnel-chart-canvas"));
for(i=0;iyzRate[i])
					   tipContent = '状态：正常
流程完成率实际值：'+toPercent(tureRate[i])+'%
流程完成率指导值：'+toPercent(yzRate[i])+'%';
				   else
					   tipContent = '状态：异常
流程完成率实际值：'+toPercent(tureRate[i])+'%
流程完成率指导值：'+toPercent(yzRate[i])+'%';
				   $('#tip').append(tipContent);
				   $('#tip').css("display","block");
				   
				  }			  
			   }(i));
			   document.getElementById(rateId[i]).onmousemove = function(evt){
				    var pageX = event.pageX;
				    var pageY = event.pageY;
				    if(pageX === undefined){
				         pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
				    }    
				    if(pageY === undefined){
				         pageY = event.clientY +(document.body.scrollTop || document.documentElement.scrollTop);
				    }
				   $('#tip').css({
				           'top' : (pageY-parentPosition.elemTop+15) + 'px',
                           'left': (pageX-parentPosition.elemLeft+15)+ 'px'
				       });

			   }			
			   document.getElementById(rateId[i]).onmouseout = function(evt){
				   $('#tip').hide();
			   }
			   
		   }	

当父元素就是body,即父元素的距离页面顶部和页面左部的距离为0时，可以不用减去父元素的页面坐标，即使用以下代码

提示内容


enenba

参考 jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动

当父元素的父元素即为body时，可以直接使用父元素的scrollTop作为父元素的页面坐标，可以参考如下代码
 javascript 跟随鼠标移动的提示框的一个小demo 

js获取一个元素到页面顶部和左部的距离

var getPos=function(o){//取元素坐标
    var x = 0, y = 0;
    do{
        x += o.offsetLeft;
        y += o.offsetTop;
    }while(o=o.offsetParent);
    return {'x':x,'y':y};
}

jquery 获取一个元素到页面顶部的距离

var X = $('#DivID').offset().top;