title: popup div location according to page space available
body: <p>My HTML Page is Like this..</p>
  
  <pre><code>&lt;a id="profile" href="#"&gt;Over Me to Show&lt;/a&gt;
  &lt;div id="profile-view"&gt;
  &lt;span&gt;Loading profile details...&lt;/span&gt;
  </code></pre>
  
  <p>My Jquery Like this.</p>
  
  <pre><code>function ProfileView(){
              var height = 18;
              var left = 10;
              var Position = $('#profile').position();
              var SetPos = {
                top:(Position.top + height) + 'px',
                left:(Position.left + left) + 'px' 
              };
              $('#profile-view').css(SetPos);
              $('#profile-view').show();
          }
          $(document).ready(function(){
             $('#profile').mousemove(function(){
                ProfileView();
             });
          });
  </code></pre>
  
  <p>When i move cursor over a link (over me to show) the #profile-view div should show.
  its is working fine this div always shows on bottom of the link..
  <br>
  <strong>I NEEDED if the div(#profile-view) full height or width cant shown Below the Link if it is overflows it should show above the link or right or left where space available to show all content in div.</strong></p>
  
  <p>I don't no how to ask this in tech term.so please forget if anything wrong. </p>