Conserver l'info-bulle dans la fenêtre du navigateur? (Sans utiliser les plugins)

Question

Mon code de pointe de l'outil est la suivante:

HTML/CSS

a.tooltip span 
{ 
    display: none; 
    padding: 5px; 
    border: 1px solid #000; 
    background: #999; 
    position: absolute; 
    color: #fff; 
    text-align: left; 
} 

<a href="#" class="tooltip">[Help]<span>This is the tooltip</span></a> 

jQuery:

$('a.tooltip').hover(
     function(e) { 
      $(this).children('span') 
       .css('display', 'block') 
       .css('width', '300px') 
       .css('left', e.pageX + 10) 
       .css('top', e.pageY + 10).show(); 
     }, 
     function() { 
      $(this).children('span').hide(); 
     } 
    ).click(function() { 
     return false; 
}); 

Cela affichera une info-bulle positionné à l'emplacement de la souris + 10 (X et Y) bien, mais quand il y a une info-bulle au bas du navigateur et qu'elle est assez grande (et qu'il y a de grandes info-bulles que je ne peux pas changer), l'info-bulle s'étendra au-delà de la fenêtre du navigateur pour voir ou faire défiler jusqu'à. Comment allez-vous vérifier si l'info-bulle va dépasser la fenêtre du navigateur et ensuite le déplacer en conséquence?

Answer 1

Pas vraiment une réponse à votre question, mais pourquoi ne pas utiliser l'un des grands plugins jtiu tooltip qui sont déjà là? Mon favori est inclus avec jQuery Tools. This example montre une implémentation qui est placée dynamiquement en fonction de sa proximité avec le bord de la fenêtre.