Question

我是一名初级Web开发人员，我刚刚完成了我的第一个网站。它非常简单，缺乏功能。你可以在这里看到它：http://www.amritayalur.com。在右侧，我在列中有一些社交媒体图标。我想使用jQuery来显示一些标记图标的文本。例如，我认为如果当Twitter图标被鼠标悬停时，左侧的一些小文字将会显示为“Twitter”，并且指向图标的箭头将会淡入。这可能吗？

谢谢！

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

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

它包含jQuery，因此如果包含jQuery Tools，则不必包含库。如果你有兴趣的话，它还有一些非常方便的东西。

Answer 3

那里有dozens of jQuery tooltip plugins。我建议你搜索一个符合你需求的。

就个人而言，我发现乍一看它们看起来都很相似，但是当谈到“API”设计（和文档）时，存在巨大的差异。另外，看看他们上次更新代码的时间。使用最近一次在2008年更新的库总是让我觉得有点不舒服。

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

Answer 4

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

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

向网站添加淡化的“工具提示”

4 个答案: