Modify JQuery easyTooltip to detect screen edges

Question

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");
        $(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);

Answer 1

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