//display a message when user hovers an element
function DisplayToolTip(tooltip, element) {
    var pos = $("#" + element).offset();
    var left = pos.left + $("#" + element).width() + 5;
    var top = pos.top - ($("#" + element).height() / 2);
    var tooltip = $("<div id='" + element + "_tip' class='tooltip' style='position: absolute; left:" + left + "px; top:" + top + "px; display: none;'>" + tooltip + "</div>");

    //add our tooltip to the document only if it doesn't exist
    if ($("#" + element + "_tip").length == 0)
        $("body").append(tooltip);

    //animate tooltip onto screen
    var tooltipElement = $("#" + element + "_tip");
    if (tooltipElement.is(':animated')) {
        tooltipElement.stop().fadeTo("slow", 1);
    }
    else {
        tooltipElement.fadeIn("slow");
    }
}

//hides a message when user hovers off an element
function HideToolTip(element) {
    //animate tool tip off screen
    var tooltipElement = $("#" + element + "_tip");
    if (tooltipElement.is(':animated')) {
        tooltipElement.stop().fadeTo("slow", 0, function() {
            $(this).remove();
        });
    }
    else {
        tooltipElement.fadeOut("slow", function() {
            $(this).remove();
        });
    }
}