How to correctly display popup using jquery

Question

As you can see here, in my example, that my pop-up screen shows on the edge. How can I check the edge by displaying a popup on the right side.

Another example is this. This shows a popup below. I want it to display where the full popup screen will be displayed.

You can see the actual demo here www.mydubaitrip.com/restaurants.aspx

My code is

$(".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) + '&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"}); }); 

Answer 1

There is no space on the right side of the page on the page www.mydubaitrip.com/restaurants.aspx

the hand icon is at the very right end of the page, if you add something there, a horizontal scroll will appear! why do you want the box to appear on the right side of this icon, while there is no room for this?