Javascript 如何检查工具提示图像是否不在屏幕上

如何检查工具提示图像是否不在屏幕上。我想如果图像不在屏幕上，那么工具提示图像应该是左侧或右侧，它不应该离开屏幕并制作滚动条。这是jquery代码

 this.imagePreview = function(){    
/* CONFIG */

    xOffset = 10;
    yOffset = 30;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

/* END CONFIG */
$("a.preview").hover(function(e){
    this.t = this.title;
    this.title = "";    
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
},
function(){
    this.title = this.t;    
    $("#preview").remove();
}); 
$("a.preview").mousemove(function(e){
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});         
    };


  // starting the script on page load
   $(document).ready(function(){
  imagePreview();
  });

this.imagePreview=function（）{
/*配置*/
xOffset=10；
yOffset=30；
//这两个变量确定弹出窗口与光标的距离
//您可能需要调整以获得正确的结果
/*结束配置*/
$（“a.preview”）.hover（函数（e）{
this.t=this.title；
this.title=“”；
var c=（this.t！=”）？“
”+this.t:”；
$（“正文”）。追加（“
”+c+”
”；
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“快速”）；
},
函数（）{
this.title=this.t；
$（“#预览”）.remove（）；
}); 
$（“a.preview”）.mousemove（函数（e）{
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});         
};
//在页面加载时启动脚本
$（文档）.ready（函数（）{
图像预览（）；
});

这是演示代码。当工具提示离开屏幕时，请注意其显示滚动。如果工具提示在x位置检测到页面结尾，则工具提示应将位置更改为右侧。

如果使用，则可以定义碰撞时应发生的情况：

从文件中：

碰撞（默认值：“翻转”）

类型：定位元素时的字符串 在某个方向溢出窗口，将其移动到其他位置 位置。与my和at类似，它接受单个值或一对值 对于水平/垂直，例如，“翻转”、“适合”、“适合翻转”、“适合无”

“翻转”：将元素翻转到目标和对象的另一侧 碰撞检测将再次运行，以查看它是否适合。哪一方 允许使用更多可见的元素

“适合”：移位 该图元远离窗口边缘

“flipfit”：首先适用 翻转逻辑，将元素放置在允许更多 要显示的元素。然后应用拟合逻辑来确保 元素的大部分尽可能可见

“无”：不适用任何 碰撞检测

---

我对您的代码做了一些小的修改，您可以在这里看到结果：

---

这个代码起作用，但是它开始像鼠标移动一样晃动图像，现在看不到：（有工作，可能在前夕做它，或者你可以尝试和黑客更多……考虑检查我发布的插件，你需要做的就是包括它，然后你可以用几行代码而不是加载：）：你能告诉我在哪里使用它吗？因为我使用它有点困惑。你能实现它吗？告诉我它会很好。将此源代码粘贴到名为

viewport.js

的文件中。然后，在页面中放置jQuery的地方使用

。然后您可以使用

$（'tooltipimageID:in-viewport'）

-这意味着工具提示图像位于视口中（将tooltipimageID替换为实际ID）hmmm问题是工具提示来自锚源。它没有id，或者我应该在锚点上放置id吗？。不，您当前使用的选择器是什么？a、 预览？使用当前使用的任何选择器。

$("a.preview").mousemove(function (e) {

    var previewPosition = $("#preview").position().left + $("#preview").width();
    var windowWidth = $(window).width();

    if (previewPosition > windowWidth) {
        $("#preview").css("left", (windowWidth - $("#preview").width()) + "px");
    } else {
        $("#preview")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px");
    }

});