jquery悬浮窗，根据鼠标位置显示

hover一个位置就在位置右侧显示悬浮窗，代码如下：

JS:

<script type="text/javascript">
$(function () {
    //hover某处显示悬浮框
    $("#createtable").mouseover(function(e){
        //获取鼠标位置函数
        var mousePos = mousePosition(e);
        var  xOffset = 20;
        var  yOffset = 25;
        $("#tooltip").css("display","block").css("position","absolute").css("top",(mousePos.y - yOffset) + "px").css("left",(mousePos.x + xOffset) + "px");
        $("#tooltip").append("悬浮窗内容");
            
     });
     //鼠标离开表格隐藏悬浮框
     $("#createtable").mouseout(function(){
         $("#tooltip").empty();
         $("#tooltip").css("display","none");
     });

});

<script type="text/javascript">
//获取鼠标坐标
function mousePosition(ev){ 
    ev = ev || window.event; 
    if(ev.pageX || ev.pageY){ 
        return {x:ev.pageX, y:ev.pageY}; 
    } 
    return { 
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
        y:ev.clientY + document.body.scrollTop - document.body.clientTop 
    }; 
}
</script>

CSS:

<style type="text/css">        
.tip{width:200px;height:80px;display:none;background-color:#f6f7f7;color:#333333;line-height:18px;border:1px solid #e1e3e2;padding:5px;}
</style>

HTML:

<div id="tooltip" class="tip"></div>
<div id="createtable">
</div>