jQuery.fn.extend({
    getTop : function(){
        return getTop(this[0]);
    },
    getLeft : function(){
        return getLeft(this[0]);
    }
});

function getTop(e){ 
var offset=e.offsetTop; 
if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
return offset; 
} 
//获取元素的横坐标 
function getLeft(e){ 
var offset=e.offsetLeft; 
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
return offset; 
}

var tooltip = {
    tmpHtml:'<table style="display:none;position:absolute;z-index:999;" id="tooltip" cellpadding=0 cellspacing=0>'+
        '<tr>'+
        '<td height="3"><img src="images/leftop.gif" /></td>'+
        '<td style="background-image: url(images/topline.gif); background-repeat: repeat-x"></td>'+
        '<td><img src="images/rightop.gif" /></td>'+
        '</tr>'+
        '<tr>'+
        '<td style="background-image: url(images/leftcenter.gif); background-repeat: repeat-y"></td>'+
        '<td id="tooltip_text" bgcolor="#ffcd05" style="font-size:12px;font-family:Verdana" align="center"></td>'+
        '<td style="background-image: url(images/rightcenter.gif); background-repeat: repeat-y"></td>'+
        '</tr>'+
        '<tr>'+
        '<td height="14" valign=top><img src="images/leftdown.gif" /></td>'+
        '<td align=center style="background-image: url(images/downline.gif); background-repeat: repeat-x"><img src="images/arrow.gif" /></td>'+
        '<td valign=top><img src="images/rightdown.gif" /></td>'+
        '</tr>'+
        '</table>',
    config:{maxWidth:300}
}

$(function(){
    $(document.body).append(tooltip.tmpHtml);
    $(".tooltip").hover(function(e){
            eval("var qtconfig = "+$(e.target).attr("qtc"));
            var maxWidth = tooltip.config.maxWidth;
            if(qtconfig != null){
                maxWidth = qtconfig.maxWidth || tooltip.config.maxWidth;
            }
            
            $("#tooltip_text").text($(e.target).attr("qt")).width(0);
            $("#tooltip").show();
   
            var xOffset = 0;
            var eTlWidth = $("#tooltip").width();
            var eWidth = $(e.target).width();
            eTlWidth = eTlWidth > maxWidth ? maxWidth : eTlWidth;
            $("#tooltip_text").width(eTlWidth);
            xOffset = getLeft(e.target)+((eWidth - eTlWidth)/2);
            if(xOffset < 0) xOffset = 0;
            if((xOffset + eTlWidth) > 990) xOffset = 990 - eTlWidth;
            $("#tooltip").css("left",xOffset).css("top",getTop(e.target)-$("#tooltip").height()+6);
        },function(e){
            var o = document.elementFromPoint(event.x,event.y);
            if ($(o).parents("#tooltip").length == 0){
                $(e.target).removeClass("highlight");
                $("#tooltip").hide();
            }
    });
    $("#tooltip").hover(function(){
        
    },function(){
        var o = document.elementFromPoint(event.x,event.y);
        if ($(o).parents(".tooltip").length == 0){
            $("#tooltip").hide();
        }
    })
})