结果如下(当鼠标指向第三条数据时，弹出该框， 并随鼠标移动)：
做到这边，会员有了一个新的要求，就是不要弹出框随着鼠标的移动而移动，那样鼠标一旦离开焦点，就会移除该弹出框，操作起来不是很方便。他们要求弹出框固定，假设就在相应的数据行的右侧吧，而且打开和关闭由会员自己控制，于是Ben就进行改良了...
同样的，先设计一个id为tips的Div元素，样式如下：
#tips
{
background-color: white;
border-left: 1px solid #a6c9e2;
border-right: 1px solid #a6c9e2;
border-top:5px solid #a6c9e2;
border-bottom:5px solid #a6c9e2;
width:268px; height:60px;
z-index:9;
position:absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:8px 18px;
}
/* 弹出层的指向图标，left：-10 使它出现在整个Div的左侧 */
#tips #tipsArrow { position:absolute; top:26px; left: -10px }
#tips #light
{
width:36px;
height:36px;
margin:6px 16px 16px 16px;
float:left;
}
#tips span
{
margin-top:18px;
}
#tips #close
{
width:20px;
height:16px;
border:none;
z-index:1;
left:280px;
top:6px;
position:absolute;
cursor:pointer;
}
{
background-color: white;
border-left: 1px solid #a6c9e2;
border-right: 1px solid #a6c9e2;
border-top:5px solid #a6c9e2;
border-bottom:5px solid #a6c9e2;
width:268px; height:60px;
z-index:9;
position:absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:8px 18px;
}
/* 弹出层的指向图标，left：-10 使它出现在整个Div的左侧 */
#tips #tipsArrow { position:absolute; top:26px; left: -10px }
#tips #light
{
width:36px;
height:36px;
margin:6px 16px 16px 16px;
float:left;
}
#tips span
{
margin-top:18px;
}
#tips #close
{
width:20px;
height:16px;
border:none;
z-index:1;
left:280px;
top:6px;
position:absolute;
cursor:pointer;
}
脚本如下：
$(document).ready(function(){
//时间鼠标经过
$("ul li span").mouseover(function(){
$("#tips").remove();
var elem= $(this).parent();
var mTop=elem.offset().top;
//获取该元素的top坐标
var mLeft=elem.offset().left;
//获取该元素的left坐标
var addLeft=elem.width();
//获取该元素的宽度
var finalTop=mTop-30;
//获取最终元素出现的Top位置，此时-30个元素是提高这个Div的高度，让箭头指向对应行
var finalleft=mLeft+addLeft+20;
// 获取最终元素出现Left的，对应行的左边加上行宽加上20个空元素
var num=$("li").index(elem)+1;
popDiv1(finalTop,finalleft,"提示框提醒你，这是第"+num+"行数据!");
})
})
//固定的信息框function popDiv1(tops,lefts,messages)
{
var str="";
str="<div id='tips'><img id='tipsArrow' src='images/arrow.png' alt=''/><img id='close' src='images/close.jpg' alt='' onclick='closeUp()'/><img src='images/light.gif' alt='' id='light'/><p>"+messages+"</p></div>";
$('body').append(str);
$("#tips").css({"top":tops+"px","left":lefts+"px"});
}
function closeUp()
{
$("#tips").remove();
}
//时间鼠标经过
$("ul li span").mouseover(function(){
$("#tips").remove();
var elem= $(this).parent();
var mTop=elem.offset().top;
//获取该元素的top坐标
var mLeft=elem.offset().left;
//获取该元素的left坐标
var addLeft=elem.width();
//获取该元素的宽度
var finalTop=mTop-30;
//获取最终元素出现的Top位置，此时-30个元素是提高这个Div的高度，让箭头指向对应行
var finalleft=mLeft+addLeft+20;
// 获取最终元素出现Left的，对应行的左边加上行宽加上20个空元素
var num=$("li").index(elem)+1;
popDiv1(finalTop,finalleft,"提示框提醒你，这是第"+num+"行数据!");
})
})
//固定的信息框function popDiv1(tops,lefts,messages)
{
var str="";
str="<div id='tips'><img id='tipsArrow' src='images/arrow.png' alt=''/><img id='close' src='images/close.jpg' alt='' onclick='closeUp()'/><img src='images/light.gif' alt='' id='light'/><p>"+messages+"</p></div>";
$('body').append(str);
$("#tips").css({"top":tops+"px","left":lefts+"px"});
}
function closeUp()
{
$("#tips").remove();
}
最终显示效果如下：
鼠标移动到相应的数据行上面，显示相应的提示框，右边的打叉小图标用以关闭整个弹出层...
设计小结：
这个设计过程的关键是position：absolute(绝对定位，作用是让层在页面上叠加)，z-index(用以显示层的叠加次序)，top、left(显示弹出页面坐标)，(offset().left,offset().top)在页面上找到某个元素的坐标，位置找到了，就可以随意在它的周边定位弹出层了，其他的样式可以根据自己的美工需求随意调节...
