Guide pour créer une info-bulle simple?

Question

Pourquoi dans le code suivant (exemple) boîte d'info-bulle sortir de la page, comment peut-il fixer comme automatique (dynamique) avec la page qui ne sort pas de la page?

Démo:http://jsfiddle.net/3UzDG/ (crinière i est sur how que la souris sur sur elle afficher toltip boîte à la page) Voir l'image:

$('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); 

}); 

Answer 1

Vous devez détecter si l'info-bulle va pour chevaucher la fenêtre actuelle et ajuster en conséquence .... il y a déjà un plugin jQuery disponible pour Tooltips - il fait exactement ce que vous voulez - vérifiez la source pour voir comment l'id vérifie la taille de la fenêtre, etc http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/