鼠标移到某一元素则在元素旁边出现弹出框(JQuery)

   类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下： 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < title > 框框随着鼠标点击的元素的位置改变而改变 </ title >
     < style  type ="text/css" >
    a {
    border :  1px solid #0f0 ;
    margin :  20px ;
    width :  60px ;
    height :  30px ;
    line-height :  30px ;
    float :  left ;
    display :  block ;
    text-align :  center ;
     }
    .pop {
        width :  350px ;
        height :  200px ;
        border :  1px solid #00f ;
        background-color :  #ffffee ;
        display :  none ;
        position : absolute ;    /*  注：弹出框必须为绝对定位  */
     }
     </ style >
     < script  type ="text/javascript"  src ="jquery.js" ></ script >
     < script  type ="text/javascript" >
         function  hidedetails(){
            $( " #details " ).hide();
        }
         function  showdetails(thisObj,orderid){
             var  d  =  $(thisObj);
             var  pos  =  d.offset();
             var  t  =  pos.top  +  d.height()  +   5 ;  //  弹出框的上边位置
             var  l  =  pos.left  +  d.width()  +   5 ;   //  弹出框的左边位置
            $( " #details " ).css({  " top " : t,  " left " : l }).show();
            $( " #details " ).html( " 订单  " + orderid + "  的内容！ " );
        }
     </ script >
</ head >
< body >
< a  href ="javascript:void(0)"  onmouseover ="showdetails(this,1)"  onmouseout ="hidedetails()" > 订单1 </ a >
< a  href ="javascript:void(0)"  onmouseover ="showdetails(this,2)"  onmouseout ="hidedetails()" > 订单2 </ a >
< a  href ="javascript:void(0)"  onmouseover ="showdetails(this,3)"  onmouseout ="hidedetails()" > 订单3 </ a >
< a  href ="javascript:void(0)"  onmouseover ="showdetails(this,4)"  onmouseout ="hidedetails()" > 订单4 </ a >
< a  href ="javascript:void(0)"  onmouseover ="showdetails(this,5)"  onmouseout ="hidedetails()" > 订单5 </ a >
< div  id ="details"  class ="pop" >
</ div >
</ body >
</ html >