将鼠标指针移到按钮上时如何显示更多信息？

Question

我使用rails v3.2.2和jquery-rails v2.0.2 ruby​​-gems。当我将鼠标指针移动到像Facebook，Google和其他公司在其应用程序中制作的按钮上时，我想要显示更多信息。

以下是谷歌Gmail的截图，显示我想在我的应用程序实现的东西：

如何，我能做些什么？

Answer 1

查看Qtip jQuery工具提示插件。

Answer 2

怎么样在您的按钮标签上使用title属性？

喜欢的东西：

<input type="button" title="your message" value="Button" /> 

Answer 3

考虑一个提示库，其中有很多，包括：

• Poshy：http://vadikom.com/demos/poshytip/
• ColorTip：http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html
• 叽：http://jamescryer.github.com/grumble.js/

网络搜索将出现更多。

Answer 4

有几种方法可以使用CSS和/或JavaScript来实现这一点。这是一个基本的CSS解决方案：

HTML

<button>Button text</button> 
<div class="tooltip">Tooltip Content</div>​ 

CSS

.tooltip { display: none; } 
button:hover+.tooltip { display: block; }​ 

http://jsfiddle.net/b7AF7/