Why in following code(example) tooltip box come out from page, how can it fix as automatic(dynamic) with page that not come out from page?

Demo: http://jsfiddle.net/3UzDG/ (i mane is about how that mouse over on it display toltip box out page) SEE image:

Untitled-2.gif

Code JavaScript:
$('li a').hover(function() {
 
    var title = $(this).next('.tooltip').html();
    var offset = $(this).offset();
 
    $tooltip = $('<div />').addClass('show_tooltip').html(title);
 
    var delay = setTimeout(function() {
 
        $('body').append($tooltip);
        var width = $tooltip.outerWidth();
 
        var p_top = offset.top;
        var p_left = offset.left - width; 
        $tooltip.css({top: p_top, left: p_left}).fadeIn(180);
 
    },280);
 
    $(this).data('delay', delay);
    $(this).data('tooltip', $tooltip);
 
},function() {
 
    delay = $(this).data('delay');
    $tooltip = $(this).data('tooltip');
    $tooltip.remove();
    clearInterval(delay);
 
});