title标签替换为浮动框及鼠标所在坐标，mouseover事件延迟触发事件实例

 <script type="text/javascript">
        (function ($) {
            $.fn.hoverDelay = function (options) {
                var defaults = {
                    hoverDuring: 1000,
                    outDuring: 0,
                    hoverEvent: function () {
                        $.noop();
                    },
                    outEvent: function () {
                        $.noop();
                    }
                };
                var sets = $.extend(defaults, options || {});
                var hoverTimer, outTimer;
                return $(this).each(function () {
                    $(this).hover(function () {
                        clearTimeout(outTimer);
                        hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
                    }, function () {
                        clearTimeout(hoverTimer);
                        outTimer = setTimeout(sets.outEvent, sets.outDuring);
                    });
                });
            }
        })(jQuery);
        //获取鼠标当前元素坐标
        function getPosition(e) {
            l = e.offsetLeft;
            t = e.offsetTop;
            while (e = e.offsetParent) {
                l += e.offsetLeft;
                t += e.offsetTop;
            }


            return { x: l, y: t };
        } 
        document.write("<style type='text/css'>#Tag {display:block;font:12px Tahoma,Verdana;background-color:#FFC;border:1px #000 solid;padding:3px;position:absolute;z-index:1000;}</style>");
        document.write("<tt id='Tag' style='filter:blendtrans(duration=.2) revealTrans(duration=.1,transition=12) alpha(opacity=90,enabled=1);-moz-opacity:0.9;display:none;'></tt>");
        //获取鼠标当前坐标
        function mousePos(e) {
            var x, y;
            var e = e || window.event;
            return {
                x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
                y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
            };
        }
        var clnP = null;
        var lock = false;
        $(function () {
            var objTit = document.getElementById("Tag");
            $("span[name='showTitle']").children().each(function () {
                $(this).hoverDelay({
                    hoverEvent: function () {
                        $(objTit).show();
                    },
                    outEvent:function(){
                        $(objTit).hide();
                    }
                });
                $(this).hover(function () {
                    if (!lock) {
                        lock = true;
                        var mousePos = getPosition(this);
                        clnP = $(this).parent().attr("title");
                        objTit.innerHTML = clnP;
                        $(this).parent().attr("title", "");
                        objTit.style.top = mousePos.y + this.offsetHeight + 2 + "px";
                        objTit.style.left = mousePos.x + this.offsetWidth + 2 + "px";
                        
                    }
                }, function () {
                    $(this).parent().attr("title", clnP);
                    lock = false;
                    
                });


            });
        });


    </script>