//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='left:" + left + "px; top:" + top + "px;'>" + tooltip + "</div>";

    //add our tooltip to the document
    $("body").append(tooltip);

    //animate tooltip onto screen
    $("#" + element + "_tip").fadeIn("slow");
}
//hides a message when user hovers off an element
function HideToolTip(element) {
    //animate tool tip off screen
    $("#" + element + "_tip").fadeOut("slow", function() {
        //remove tool tip from document
        $(this).remove();
    });
}