Modify JQuery easyTooltip to detect screen edges

I'm using the following JQuery script to create hovering tooltips, the problem is if the tooltip gets close to the edge of the screen it doens't flip or snap to the edge.

(function($) {
$.fn.easyTooltip = function(options){
    var defaults = { // default configuration properties
        xOffset: 10,        
        yOffset: 25,
        tooltipId: "easyTooltip",
        clickRemove: false,
        content: "",
        useElement: ""
    };

    var options = $.extend(defaults, options);  
    var content;
    var url;

    this.each(function() {                  
        var title = $(this).attr("title");
        var url = $(this).attr("tooltipURL");
 开发者_JS百科       $(this).hover(function(e){
            if (url != "" && url != undefined) {
                content = '<span class="loadingimage"></span> Loading...';
                tooltip(content);
                $('#'+options.tooltipId).load(url, {"id":$(this).attr("value")}); 
            } else {
                content = (options.content != "") ? options.content : title;
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                $(this).attr("title","");
                if (content != "" && content != undefined){         
                    tooltip(content);
                }
            }

            function tooltip(content) {
                $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");      
                $("#" + options.tooltipId)
                    .css("position","absolute")
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                     
                    .css("display","none")
                    .fadeIn("fast")
            }

        },
        function(){ 
            $("#" + options.tooltipId).remove();
            $(this).attr("title",title);
        }); 
        $(this).mousemove(function(e){
            $("#" + options.tooltipId)
                .css("top",(e.pageY - options.yOffset) + "px")
                .css("left",(e.pageX + options.xOffset) + "px")                 
        }); 
        if(options.clickRemove){
            $(this).mousedown(function(e){
                $("#" + options.tooltipId).remove();
                $(this).attr("title",title);
            });             
        }
    });

};

})(jQuery);

jQuery Tools Tooltip (+ Dynamic Plugin) supports this; I'd suggest you switch to use that or try implementing the code on your existing setup.

Instead of

 $("#" + options.tooltipId)
            .css("top",(e.pageY - options.yOffset) + "px")
            .css("left",(e.pageX + options.xOffset) + "px")  

Try something along the lines of:

    var x = (e.pageX + options.xOffset);//start with your current setting
    //Check to see if it goes off screen
    if ((x + $("#yourdiv").outerWidth()) >= $(window).width()) {
            x = e.pageX - $("#tooltip").outerWidth();
        }

and then repeat for y and replace existing code of course:

     $("#" + options.tooltipId)
            .css("top",(y) + "px")
            .css("left",(x) + "px")