如何使用jquery在鼠标悬停时正确显示弹出窗口

Question

如您所见，我的示例中弹出框显示在边缘。我该如何检查边缘，以便将弹出框显示在右侧。

另一个示例是这样的。它将弹出框显示在底部。我希望它能够完全显示弹出框。

您可以在www.mydubaitrip.com/restaurants.aspx上查看实际演示。

我的代码如下：

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

- Sherry Ann Hernandez

---

我添加了一个CodePen，可能会对你有所帮助。它用于显示工具提示，并考虑了元素在屏幕上的位置以及页面滚动的程度等因素... 它可能对你有用，并且应该很容易根据你的需求进行调整 - http://codepen.io/lukeocom/pen/Dewdo - lukeocom

Answer 1

在www.mydubaitrip.com/restaurants.aspx页面的右侧没有足够的空间。

手形图标位于页面的最右端，如果您在那里添加任何内容，水平滚动条将出现！为什么您希望该框出现在该手形图标的右侧，而实际上没有足够的空间呢？

- M a m a D