title: How to display the pop up correctly on mouse over using jquery
body: <p>As you can see here in my sample that my pop up is showing at the edge. How can I check the edge thus displaying the pop up on the right side.</p>
  
  <p><img src="https://i.stack.imgur.com/pF1aD.png" alt="The popup displays at the end of the screen"></p>
  
  <p>Another example is this. This one shows the pop up at the bottom. I want it to display wherein the full pop up will show.</p>
  
  <p><img src="https://i.stack.imgur.com/zhuLn.png" alt="enter image description here"></p>
  
  <p>You can view the actual demo here www.mydubaitrip.com/restaurants.aspx</p>
  
  <p>My code is this</p>
  
  <pre><code>$(".thumbsUpNav").live("mouseenter", function(e) {
      var id = $(this).children("span").attr("id");
      var pURL = $('#txtTopLevelNode').val() + 'WhyBookList.aspx?id=';
      pID = "#whyBookReviewRating" + id;
      $(".whyBookReviewRating").css({"display":"none"});
      //$(this).children('.arrow_pop_up').css({top: $(this).offset().top + "px"});
  
      if (id != "") {
          $(pID).empty();
          if (($(pID).length == 0) || ($(pID).length == 1)) {
  
              $.ajax({
                  contentType: 'application/json; charset=utf-8',     
                  type: 'GET',
                  url : pURL + id.substring(1, 6) + '&amp;type=' + id.substring(0,1),
                  success : function (data) {
                      $(pID).append(data);
                  }
              });
          }  
          pos = $(this).offset();    
          var width = $(this).children("span").width();     
  
          $(pID).css({   
              left: (width) + 'px'
          });
          $(pID).stop().css({"display":"block"});  
      }
      else if (id == "") {
          $(".whyBookReviewRating").css({"display":"none"}); 
      }
  });
  
  $(".thumbsUpNav").live("mouseleave", function() {
      var id = $(this).attr("rel");
      pID = "#whyBookReviewRating" + id;
      $(".whyBookReviewRating").css({"display":"none"});  
  });
  </code></pre>