Edit in JSFiddle

$(function() {
    var title = "";
    tooltip = $("#tooltip_wrapper");

    $("*[title]").hover(function(e) {

        el = $(this);

        title = $(el).attr("title");
        $(el).removeAttr("title");

        tooltipTimer = setTimeout(function() {

            $(tooltip).find("#tooltip_text").text(title);

            var xPos = ($(el).offset().left + $(el).width() / 2) - ($(tooltip).width() / 2);
            yPos = $(el).offset().top - $(tooltip).height() + parseInt($(el).css("padding-top"));

            $(tooltip).css({
                left: xPos,
                top: yPos,
                display: "block",
                opacity: 0
            }).animate({
                top: yPos - 5,
                opacity: 1
            }, 200);
        }, 500);
    }, function() {

        $(el).attr("title", title);
        clearTimeout(tooltipTimer);

        $(tooltip).animate({
            top: yPos - 25,
            opacity: 0
        }, 200, function() {

            if ($(tooltip).is(":animated")) {
                $(tooltip).css({
                    left: -1000,
                    top: -1000,
                    display: "none",
                    opacity: 0
                });
                $(tooltip).find("#tooltip_text").text("");
            }
        });
    });

    $(tooltip).hover(function() {
        $(tooltip).hide();
    });
});