$(document).ready(function() {
    $('.tltip_a').click(function (e) {
        var position = $(this).position();
        var height = $(this).next(".subpanel").height();
        var width = $(this).next(".subpanel").width();
        leftVal = position.left - (width / 2)+7 + "px";
        topVal = position.top - (height)+3 + "px";
        $(this).next(".subpanel").css({ left: leftVal, top: topVal });
        if ($(this).next(".subpanel").is(':visible')) {
            $(this).next(".subpanel").hide();
            $(".tltip a").removeClass('active'); 
        }
        else { 
            $(".subpanel").hide(); 
            $(this).next(".subpanel").toggle();
            $(".tltip a").removeClass('active');
            $(this).toggleClass('active');
        }
        return false;
    });
    $(document).click(function() {
        $(".subpanel").hide();
    });
});