自定义鼠标移动提示框

背景： 有一个界面元素，当鼠标移动到上面后，动态的显示提示信息。

$("#labelId").mouseover(function (e) {
            var leftwidth = getToolTipLeftWidth(e.pageX);
            var message = "自定义的提示信息，这里可以当做参数传递进来";
            $("body").append("<div id='tooltip' class='tooltip'>" + message  + "</div>");//将要显示的内容添加到 新建 div标签中 并追加到 body 中
            $("#tooltip")
                .css({
                    //设置 div 内容位置
                    "top": (e.pageY + 10) + "px",
                    "position": "absolute",//添加绝对位置
                    // "left": (e.pageX + 20) + "px"
                    "left": leftwidth + "px"
                    // "width": "100px",
                    // 'height':"80px"
                }).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du
        }).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件
            // this.title = this.Mytitle;
            $("#tooltip").remove();//移除对象
        }).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件
            var leftwidth = getToolTipLeftWidth(e.pageX);
            var message = "自定义的提示信息，这里可以当做参数传递进来";
            $("#tooltip")
                .css({
                    //设置 div 内容位置
                    "top": (e.pageY + 10) + "px",
                    "position": "absolute",//添加绝对位置
                    "left": leftwidth + "px"
                });
        });


/**
 * 计算提示框距离左侧的宽度
 */
function getToolTipLeftWidth(x){
    var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
    var leftwidth = x+20;
    if(windowWidth - x < 200){
        leftwidth = x - 100;
    }
    return leftwidth;
}

 <style>

    　.tooltip {
        position: absolute;
        display: none;
        z-index: 9900000;
        outline: none;
        padding: 5px;
        border-width: 1px;
        border-style: solid;
        border-radius: 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
    }

   


    </style>