jquery tooltip goes off screen need a way to prevent it

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

how could I get the tooltips to stay inside the window? and i have looked around for an answer which was position: { viewport: $(window) } but i have no clue on where to place this in the code

Answer 1

You don't have to add viewport or anything, just update this in your css

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

to

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

It will automatically wrap it and if you want to restrict it to some width just add

max-width: 300px;

So final css changes are

#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;
    }

Check http://jsfiddle.net/raunakkathuria/9c7fk/2/