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

Question

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

以下是Google Gmail的屏幕截图，其中显示了我希望在我的应用程序中实现的内容：

我该怎么做？

Answer 1

使用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/

Answer 2

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

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

网络搜索会出现更多。

Answer 3

查看Qtip jQuery工具提示插件。

Answer 4

如何在按钮标记上使用title属性？

类似的东西：

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