向网站添加淡入淡出"tooltips"

Question

我是一名初级web开发人员，刚刚完成了我的第一个网站。它非常简单，而且缺乏功能。你可以在这里看到：http://www.amritayalur.com.在右边，我在一个专栏中有一些社交媒体图标。我想使用jQuery来显示一些标记图标的文本。例如，我认为如果当推特图标被鼠标悬停时，左边写着"推特"的一些小文本会随着指向图标的箭头而消失，那将是非常酷的。这可能吗？

谢谢！

Answer 1

http://jsfiddle.net/566kZ/

大致如下：

<style>
.tooltip {
[various styles]
opacity:0;
}
</style>
<script>
$(document).ready(function() {
  $(".socialLink").hover(
    function () { 
      $(this).find(".tooltip").stop().animate({opacity: 1},500);
    },
    function () { 
      $(this).find(".tooltip").stop().animate({opacity: 0},500);
  });
});
</script>
<a href="twitter.com" class="socialLink">
<img src="twitter.jpg" />
<div class="tooltip">Twitter</div>
</a>

通过一些相当简单的工具提示样式，您可以实现您想要的效果。

Answer 2

有几十个jQuery工具提示插件。我建议你搜索一个适合你需要的。

就我个人而言，我发现乍一看，它们看起来都很相似，但当涉及到"API"设计（和文档）时，存在巨大的差异。此外，请查看他们上次更新代码的时间。最后一次使用2008年更新的图书馆总是让我感到有点不舒服。

在我的上一个项目中，我使用了这个jQuery工具提示库。

Answer 3

试试这个http://flowplayer.org/tools/tooltip/index.html

它包含jQuery，所以如果包含jQuery工具，就不必包含库。如果你感兴趣的话，它还有一些其他非常方便的东西。

Answer 4

qTip是一个jQuery工具提示插件，您可以尝试

http://craigsworks.com/projects/qtip/