title: How to offset & prevent tooltip(s) from passing the bottom edge of a page?
body: <p>I'm trying to figure out what to add to this script to prevent the tooltip from going past the edge of the bottom of my page.  Any help and your time is much appreciated thanks.</p>
  
  <pre><code>&lt;!-------------SCRIPT----------------&gt;
  
      &lt;script&gt;
      $(document).ready(function() {
              // Tooltip only Text
              $('.masterTooltip').hover(function(){
                      // Hover over code
                      var title = $(this).attr('title');
                      $(this).data('tipText', title).removeAttr('title');
                      $('&lt;p class="tooltip"&gt;&lt;/p&gt;')
                      .text(title)
                      .appendTo('body')
                      .fadeIn('slow');
              }, function() {
                      // Hover out code
                      $(this).attr('title', $(this).data('tipText'));
                      $('.tooltip').remove();
              }).mousemove(function(e) {
                      var mousex = e.pageX + 20; //Get X coordinates
                      var mousey = e.pageY + 10; //Get Y coordinates
                      $('.tooltip')
                      .css({ top: mousey, left: mousex })
              });
      });
      &lt;/script&gt;
  
  
  
   &lt;!--------------CSS------------------&gt;   
      &lt;style&gt;
      .tooltip {
          display:none;
          position:absolute;
          border:1px solid #333;
          background-color:#161616;
          border-radius:5px;
          padding:10px;
          color:#fff;
          font-size:12px Arial;
      }
      &lt;/style&gt;
  
  
  &lt;!------------------HTML-----------------&gt;    
      &lt;a href="#" title="This will show up in the tooltip" class="masterTooltip"&gt;Your Text&lt;/a&gt;
      &lt;p title="Mouse over the heading above to view the tooltip." class="masterTooltip"&gt;Mouse over the heading text above to view it's tooltip.&lt;/p&gt;
      &lt;img src="image.jpg" class="masterTooltip" title="Tooltip on image" /&gt;
  </code></pre>
  
  <p>DEMO: <a href="http://jsfiddle.net/KP7mT/" rel="nofollow">http://jsfiddle.net/KP7mT/</a>?</p>