Как создать tooltips с помощью CSS и jQuery

CSS

.popup_tooltip {
    position: absolute;
    z-index: 999;
    left: -9999px;
    background-color: #222;
    padding: 5px 10px;
    width: 250px;
    color: #fff;
    border-radius: 5px;
}
.popup_tooltip p {
    margin: 0;
}

JS

function simple_tooltip(target_items, name){
    $(target_items).each(function(i){
        $("body").append("<div class='popup_"+name+"' id='" + name + i + "'><p>" + $(this).attr('title') + "</p></div>");
        var my_tooltip = $("#" + name + i);

        $(this).removeAttr("title").mouseover(function(){
            my_tooltip.css({opacity: 0.8, display: "none"}).fadeIn(400);
        }).mousemove(function(kmouse){
            my_tooltip.css({left: kmouse.pageX + 15, top: kmouse.pageY + 15});
        }).mouseout(function(){
            my_tooltip.fadeOut(400);
        });
    });
}
// Использовать так:
$(document).ready(function(){
    simple_tooltip("a.tooltip", "tooltip");
});