js实现提示框跟随鼠标移动

定义css样式

<style type="text/css">
#popupcontent
{
position: absolute;
visibility: hidden;   
overflow: hidden;   
border:1px solid #CCC;   
background-color:#F9F9F9;   
border:1px solid #333;   
padding:5px;
}
</style>

js代码

<script type="text/javascript">

function showPopup(w,h,tabID,StoreBH,promptInfo,usedCs,cs){
				var printStr = "";// 1、2、3/4、5（已使用层数/未使用层数）
				var arrListCs = new Array();  
				var arrListCsUnUsed = ""; 
				var arrListCsUsed = ""; 
				arrListCs = usedCs.replace('[','').replace(']','').split(','); 
				var pdStr = "";
				if(arrListCs!='') {
					for(var m=0; m<arrListCs.length; m++) {
						if(m!=arrListCs.length-1) {
							arrListCsUsed = arrListCsUsed + arrListCs[m] + "、";
						}else {
							arrListCsUsed = arrListCsUsed + arrListCs[m];
						}

					}
					for(var i=1; i<=cs; i++) {
						var pdStr = "no";
						for(var j=0; j<arrListCs.length; j++) {
							if(i==arrListCs[j]) {
								pdStr = "yes";	
							}
						}
						//去掉已经使用的层数，保留未使用的层数
						if(pdStr!="" && pdStr=="no") {
							if(i!=cs) {
								arrListCsUnUsed = arrListCsUnUsed + i + "、";
							}else {
								arrListCsUnUsed = arrListCsUnUsed + i;
							}
						}
						//去掉字符串后面多余的"、"
						if(i==cs && pdStr == "yes") {
							arrListCsUnUsed = arrListCsUnUsed.substring(0,arrListCsUnUsed.length-1);
						}
					}
					printStr = arrListCsUsed + "/" + arrListCsUnUsed + "(已使用层数/未使用层数)";
				}else {
					printStr = "空仓位";
				}

				//alert("X:"+event.clientX+","+"Y:"+event.clientY);
				var tempobj = document.getElementById(tabID); 
				//下面的函数是为了得到鼠标所移动到位置的网页里面的坐标  

				 //下面就是根据所取得的网页里的坐标显示层的位置
				var popUp = document.getElementById("popupcontent");  
				popUp.style.top = event.clientY +"px"; 
				popUp.style.left = (event.clientX + 30)+"px";  
				popUp.style.width = w + "px";  
				popUp.style.height = h + "px";   
				popUp.style.visibility = "visible";

				popUp.innerHTML = "<div id=\"statusbar\" ><table><tr><td>" + StoreBH + "</td></tr><tr><td>" + promptInfo + "</td></tr><tr><td>"+ printStr +"</td></tr></table></div>";  

			}

			//隐藏弹出表格函数
			function hidePopup(){   
				var popUp = document.getElementById("popupcontent");  
				popUp.style.visibility = "hidden";
			}


		</script>

html代码

//定义div层
<div id="popupcontent" class="popupcontent"></div>
<table id="tab1">
<tr>
<td height="35" width="35" align="center" style="border-right:none; border-bottom:none;" onmouseover="showPopup('250','100','tab<s:property value="#st.index"/>','<%=StoreBH %>','<%=promptInfo %>','<%=usedCs %>','<%=cs %>')" onmouseout="hidePopup();"><%=usedFlag %></td>
</tr>
</table>

效果图如下见附件