div模拟tooltip提示效果

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>    
    <script type="text/javascript">
        function test(obj, set_Width, set_Text, e) {
            var c_Width = document.documentElement.clientWidth; //可见区域宽度
            var c_Height = document.documentElement.clientHeight; //可见区域高度
            var s_Top = document.documentElement.scrollTop || document.body.scrollTop; //向下滚动了多少
            var s_Left = document.documentElement.scrollLeft || document.body.scrollLeft; //向左滚动了多少
            $("<div id=\"div__Show\"></div>").html(set_Text).css({ "z-index": "2147483647", "width": set_Width + "px" }).prependTo("body");
            var js_Show = $("#div__Show");
            var obj_Height = js_Show[0].offsetHeight; //div自适应的高度
            if ($(e)[0].clientX < c_Width / 2 && $(e)[0].clientY < c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top + "px", "left": $(e)[0].clientX + s_Left + 20 + "px", "border": "double 4px red" }); }
            else if ($(e)[0].clientX > c_Width / 2 && $(e)[0].clientY < c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top + "px", "left": $(e)[0].clientX + s_Left - set_Width - 20 + "px", "border": "double 4px red" }); }
            else if ($(e)[0].clientX < c_Width / 2 && $(e)[0].clientY > c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top - obj_Height - 10 + "px", "left": $(e)[0].clientX + s_Left + 20 + "px", "border": "double 4px red" }); }
            else if ($(e)[0].clientX > c_Width / 2 && $(e)[0].clientY > c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top - obj_Height - 10 + "px", "left": $(e)[0].clientX + s_Left - set_Width - 20 + "px", "border": "double 4px red" }); }
            $(obj).bind({
                "mousemove": function (e) {
                    if ($(e)[0].clientX < c_Width / 2 && $(e)[0].clientY < c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top + "px", "left": $(e)[0].clientX + s_Left + 20 + "px", "border": "double 4px red" }); }
                    else if ($(e)[0].clientX > c_Width / 2 && $(e)[0].clientY < c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top + "px", "left": $(e)[0].clientX + s_Left - set_Width - 20 + "px", "border": "double 4px red" }); }
                    else if ($(e)[0].clientX < c_Width / 2 && $(e)[0].clientY > c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top - obj_Height - 10 + "px", "left": $(e)[0].clientX + s_Left + 20 + "px", "border": "double 4px red" }); }
                    else if ($(e)[0].clientX > c_Width / 2 && $(e)[0].clientY > c_Height / 2) { $("#div__Show").css({ "width": set_Width + "px", "position": "absolute", "top": $(e)[0].clientY + s_Top - obj_Height - 10 + "px", "left": $(e)[0].clientX + s_Left - set_Width - 20 + "px", "border": "double 4px red" }); }
                },
                "mouseout": function () { $("#div__Show").remove(); }
            });
        }
    </script>

 

调用：

<a href="javascript:void(0);" onmouseover="test(this,100,'测试测试',event)">鼠标滑动测试</a>