首选的jQuery工具提示？

Question

那里有一堆jquery工具提示插件。

我应该使用哪一个？为什么？

Answer 1

我们在我们的一个项目中使用了qTip，因为它符合我们所有的要求，经过很好的开发和维护，具有出色的文档和漂亮的模板，并且还提供了高度的抽象和定制。

Answer 2

very small and fast lots of fancy stuff

Answer 3

我在我最新的网站上使用wayfarerweb.com/wtooltip.php。易于使用，但有些时候，IE显示NULL而不是文本。

Answer 4

我已经使用了实际的jQuery tooltip。 Here's演示它可以做什么。它很容易使用，您可以配置外观。

Answer 5

我已经定制了Robert Baumgartner's tooltip脚本，所以它不会弹出屏幕上的项目。我只是将它添加到我的母版页，它将在页面准备就绪时自动执行。

window.viewport = 
{ 
    height: function() { 
     return $(window).height(); 
    }, 

    width: function() { 
     return $(window).width(); 
    }, 

    scrollTop: function() { 
     return $(window).scrollTop(); 
    }, 

    scrollLeft: function() { 
     return $(window).scrollLeft(); 
    } 
}; 


jQuery.tooltip = function() { 
    tooltipClass = ".tooltip"; // replace with your class, for multiple classes, separate with comma. 

    function str_replace(search, replace, subject) { 
     return subject.split(search).join(replace); 
    } 

    xOffset = 10; 
    yOffset = 20; 
    fadeInTime = 300; 

    function positionToolTip(e) { 
     var offsetFromTop = e.pageY - viewport.scrollTop(); 
     var offsetFromLeft = e.pageX - viewport.scrollLeft(); 
     var tooltipObj = $('#tooltip'); 
     var pxToBottom = viewport.height() - (e.pageY - viewport.scrollTop()); 
     var cssTop = 0; 
     var cssLeft = (e.pageX + yOffset); 
     var topMargin = parseFloat(tooltipObj.css('marginTop')); 
     if (isNaN(topMargin)) { 
      topMargin = 0; 
     } 
     var topPadding = parseFloat(tooltipObj.css('paddingTop')); 
     if (isNaN(topPadding)) { 
      topPadding = 0; 
     } 
     var topBorder = parseFloat(tooltipObj.css('border-top-width')); 
     if (isNaN(topBorder)) { 
      topBorder = 0; 
     } 
     var topOffset = topMargin + topPadding + topBorder; 

     if (tooltipObj.height() > viewport.height()) { 
      cssTop = viewport.scrollTop() - topOffset + topPadding; 
     } 
     else if (tooltipObj.height() > pxToBottom) { 
      cssTop = viewport.scrollTop() + (viewport.height() - tooltipObj.height()) - topOffset - topPadding - topBorder; 
     } 
     else { 
      cssTop = e.pageY - xOffset; 
     } 

     tooltipObj.css({ top: cssTop, left: cssLeft }).fadeIn(fadeInTime); 
    } 

    jQuery("[title]").hover(function(e) { 
     if (this.t === undefined || this.t.length == 0) { 
      this.t = this.title; 
      this.title = ""; 
      this.t = str_replace("::", "<br />", this.t); 
      this.t = str_replace("[!]", "<span class='tooltipTitle'>", this.t); 
      this.t = str_replace("[/!]", "</span><br />", this.t); 
      this.t = str_replace("[", "<", this.t); 
      this.t = str_replace("]", ">", this.t); 
     } 
     if (this.t != "") { 
      jQuery("body").append("<p id='tooltip'>" + this.t + "</p>"); 
      positionToolTip(e, this); 
     } 
    }, function() { 
     jQuery("#tooltip").remove(); 
    }); 
    jQuery("[title]").mousemove(function(e) { 
     positionToolTip(e); 
    }); 
    jQuery("[title]").bind('remove', function() { 
     jQuery("#tooltip").remove(); 
    }); 
    jQuery("[title]").bind('disabled', function() { 
     jQuery("#tooltip").remove(); 
    }); 
} 

jQuery(document).ready(function() { 
    jQuery.tooltip(); 
}); 

Answer 6

我写了一个非常简单的工具提示插件。你可以找到它@http://plugins.jquery.com/project/hovertiphtml它支持工具提示/ hovertip（大多数工具提示插件没有）和自定义CSS内的完整的HTML标记。

Answer 7

我强烈建议http://craigsworks.com/projects/qtip2/ vs qtip v1。 qtip v1不再维护，qtip2有一些很棒的新功能。