Question

CODE

$(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) }的答案，但我不清楚将其放在代码中的位置

Answer 1

您不必添加视口或任何内容，只需在您的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/

jquery工具提示离开屏幕需要一种方法来防止它

1 个答案: