Javascript:

function tooltip() {
    var title = $(this).attr("title");
    $(this).removeAttr("title");

    this.TooltipMessage = $("<div />", {class: "tooltipMessage", style: "display: none;"});
    this.TooltipMessage.html("<span>" + title + "</span>");
    $("body").append(this.TooltipMessage);


    if ($(this).hasClass("tooltipLeft")) {
        this.TooltipMessage.addClass("left");
    }

    $(this).hover(tooltipFadeIn, tooltipFadeOut);
    $(this).mousemove(tooltipMousemove);
}

function tooltipFadeIn() {
    this.TooltipMessage.stop(true, false).fadeIn();
}

function tooltipFadeOut() {
    this.TooltipMessage.stop(true, false).fadeOut();
}

function tooltipMousemove(e) {
    var offset = {
        left: e.pageX,
        top: e.pageY + 10
    };

    if (this.TooltipMessage.hasClass("left")) {
        offset.left -= this.TooltipMessage.width() + 10;
    } else {
        offset.left += 25;
    }

    this.TooltipMessage.offset(offset);
}

$(function (e) {
    $(".tooltip").each(tooltip);
});


CSS:
div.tooltipMessage {
    z-index: 9001;    /* It's over 9000! :D */
    position: absolute;
    width: 400px;
    text-align: left;
}
div.tooltipMessage > span {
    display: inline-block;
    background: black;
    background-color: rgba(0, 0, 0, .8);
    border-radius: 0 5px 5px 5px;
    padding: 2px 5px;
    color: white;
}
div.tooltipMessage.left > span {
    float: right;
    border-radius: 5px 0 5px 5px;
}