將鼠標指針移到按鈕上時如何顯示更多信息？

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/