Изменить JQuery easyTooltip для обнаружения краев экрана

Question

Я использую следующий сценарий JQuery для создания всплывающих подсказок, проблема в том, что всплывающая подсказка приближается к краю экрана, который он не переворачивает или не привязывается к краю.

(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) поддерживает это; Я предлагаю вам переключиться на использование этого или попробовать реализовать код на существующей настройке.

Answer 2

Вместо

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

Попробуйте что-то вдоль линий:

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

, а затем повторить у и заменить существующий код курса:

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