那里有一堆jquery工具提示插件。
我应该使用哪一个？为什么？
答案 0 :(得分：15)
我们在其中一个项目中使用了qTip，因为它符合我们的所有要求，经过精心开发和维护，提供了出色的文档和已经漂亮的模板，并且给了我们很高的评价。抽象和定制程度。
答案 1 :(得分：2)
我强烈推荐http://craigsworks.com/projects/qtip2/ vs qtip v1。 qtip v1不再维护，qtip2有一些很棒的新功能。
答案 2 :(得分：1)
答案 3 :(得分：1)
我使用了实际的jQuery tooltip。 Here's演示它能做什么。它易于使用，您可以配置外观。
答案 4 :(得分：1)
我已经定制了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();
});
答案 5 :(得分：0)
我在我的最新网站上使用了wayfarerweb.com/wtooltip.php。易于使用，但有些IE浏览器显示的是NULL而不是文本。
答案 6 :(得分：0)
我写了一个非常简单的工具提示插件。你可以找到@ http://plugins.jquery.com/project/hovertiphtml它支持工具提示/ hovertip（大多数工具提示插件没有）和自定义css中的完整html标记。
答案 7 :(得分：0)
我更喜欢按照我喜欢色彩的教程进行学习。不需要jquery插件。
http://www.ilovecolors.com.ar/rollovers-and-tooltips-with-jquery
该教程如下。
jQuery的滚动条和工具提示
我需要快速设置才能完成一些过渡和工具提示。您知道，通常的做法是，将鼠标悬停在图标上可以更改图像并显示工具提示。我考虑过通过jQuery利用html标签属性进行操作。如果您现在想跳进去，可以进入
现在，如果您仍然与我在一起，我们来遍历代码。本教程假定您具有html，css和jquery的基本知识。 标记
这很简单，只是一个无序的列表，其中包含三个项目，每个项目都有一个链接
<ul id="iconbar">
<li><a href="#">
<img src="key.gif" alt="" />
<span>Change your password</span>
</a></li>
<li><a href="http://feeds.feedburner.com/ilovecolors" target="_blank">
<img src="rss.gif" alt="" />
<span>Suscribe to our RSS!</span>
</a></li>
<li><a href="#">
<img src="sel.gif" alt="" />
<span>Choose your options!</span>
</a></li>
</ul>
但是，在每个链接中，我们有两个重要的块：图标图像和跨度。在img标签上，我们将更改其src属性。我们将在工具提示中使用span标签。最初，img标记具有默认的src值，并且隐藏了跨度，当时间到了并且触发了悬停事件时，img src属性被重定向到其他位置（另一幅图像），并且跨度显示出来，显示您定义的文本
样式
该样式的阅读时间更长，但我们仅对两个项目进行样式设置：li容器和span块。
#iconbar li {
float:left; position:relative; margin-right:20px;
}
#iconbar span {
position: absolute;
top: -50px;
left: -80px;
display: none;
background: url(ttbg.jpg) no-repeat;
width: 110px;
height: 35px;
text-align: center;
padding: 5px;
line-height:110%;
color:#000000;
}
我们要在li元素的相对位置内定义一个绝对位置。现在我们可以分配一些顶部和左侧的值来定位它。这些值将在稍后由我们的jQuery脚本修改。由于我们不希望跨度在首次打开页面时可见，因此显示设置为无。图标不需要样式，因为我们仅通过jQuery更改src属性。 jQuery代码
jQuery确实很棒，只需几行代码，我们就可以准备图标翻转和工具提示。所以，让我们开始吧。 DOM准备就绪后，我们将根据图标栏中li元素的悬停状态启动一个函数。启动后，它将在li中获取图片的src属性，并将不带扩展名的名称存储在名为origen的变量中。
jQuery(document).ready(function(){
$("#iconbar li").hover(
function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split(".")[0];
接下来，我们为img的src属性分配一个新路径，在名称后附加“ o”，以及相应的扩展名，在本例中为“ .gif”。工具提示部分开始设置其不透明性以淡入淡出和顶部位置的动画（还记得样式表上的值吗？）。
$(this).find("img").attr({src: "" + origen + "o.gif"});
$(this).find("span").animate({opacity: "show", top: "-60"}, "normal");
},
请注意用逗号分隔两个功能。 jQuery中的悬停事件采用两个参数：一个用于鼠标悬停状态，一个用于鼠标展开状态。现在我们进入铺展状态，这就是当鼠标滑出li区域时发生的情况。我们再次获取图像src属性，并在“ o。”处拆分，在悬停事件上添加了字符串，然后将src属性重定向到原始图像路径。工具提示的动画朝着不透明度为零的方向移动，我们将其定位在样式表中定义的相同的最高值（在本例中为50）。请注意，我没有添加“ px”值。不要像我这样懒惰并添加它们，但是您会发现，即使没有“ px”尺寸，它仍然可以使用。我们将其快速隐藏起来，以防止与其他任何事物发生冲突。您知道，当某些地方可能出问题时，就会发生，所以不要给它机会。
function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split("o.")[0];
$(this).find("img").attr({src: "" + origen + ".gif"});
$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
});
});
当然，你们中的某些人可能会认为您可以将任何东西放在那个可爱的小跨度内，的确有可能。例如，一个图标。
<ul>
<li><a href=”#”>
<img src=”sel.gif” alt=”” />
Choose your options!<img src=”sel.gif” alt=”” />
</a></li>
</ul>