javascript - jQuery的工具提示离开屏幕需要一种方法来防止它

码

$(document).ready(function(){
    $('#Box10_main').hover(function(){
        //mouse enters
        $("#tool_10").css("display", "block");
    }, function(){
        //mouse leaves
        $("#tool_10").css("display", "none");
    });
        position: {
            viewport: $(window);
        };
    $(document).mousemove(function(event){
        var mx = event.pageX+15;
        var my = event.pageY+15;
        $("#tool_10").css("left", mx + "px").css("top", my + "px");
    });
});

如何获得工具提示以留在窗口内？而且我一直在寻找position: { viewport: $(window) }的答案，但是我不知道在代码中的何处

最佳答案

您无需添加视口或其他任何东西，只需在CSS中进行更新

#tool_1, #tool_2, #tool_3, #tool_4, #tool_5, #tool_6, #tool_7, #tool_8, #tool_9, #tool_10 {
   width: 300px;
}

至

#tool_1, #tool_2, #tool_3, #tool_4, #tool_5, #tool_6, #tool_7, #tool_8, #tool_9, #tool_10 {
  width: auto;
}

它会自动包装它，如果您想限制它的宽度，只需添加

max-width: 300px;

所以最终的CSS更改是

#tool_1, #tool_2, #tool_3, #tool_4, #tool_5, #tool_6, #tool_7, #tool_8, #tool_9, #tool_10 {
      width: auto;
      max-width: 300px;
    }

检查http://jsfiddle.net/raunakkathuria/9c7fk/2/