修改JQuery easyTooltip来检测屏幕边缘

我使用下面的JQuery脚本创建悬停工具提示，问题是如果工具提示接近屏幕边缘，它不会翻转或对齐边缘。修改JQuery easyTooltip来检测屏幕边缘

(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）;

来源

2010-09-12 Canadaka

的http：//文档.jquery.com /插件/工具提示 – kennytm 2010-09-12 07:57:08

可以显示您的工作页面吗？ – 2010-09-12 08:02:13

它正在一个新网站上使用，我正在使用http://webcomictweets.com/将鼠标悬停在任何头像或用户名上作为示例。 – Canadaka 2010-09-13 11:31:06

jQuery Tools Tooltip (+ Dynamic Plugin)支持此;我建议你切换使用，或尝试在你现有的设置上实现代码。

来源

2010-09-12 19:59:25 Steve

我看过其他的jQuery工具提示脚本，但它们都显得臃肿。那个超过7KB，我现在使用的是1.8KB。但我喜欢easyTooltip的主要事情之一是我可以从外部php文件加载工具提示内容，而不是将所有文本放在title =“”标签中，这些工具提示似乎都是这样做的。 – Canadaka 2010-09-13 11:29:06

您可以将jQuery Tools的导出自定义为您需要的功能，并选择将其缩小 - 我确信它会将其降至7kb以下。我也希望这个功能允许将内容从外部抽象出来;这是一个相当不同的插件。 – Steve 2010-09-13 12:50:17

而不是

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

，然后重复的Y和替代，当然现有代码：

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

来源

2010-11-12 14:07:45

修改JQuery easyTooltip来检测屏幕边缘

回答

相关问题