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

【问题标题】：How to display some more information when moving the mouse pointer over a button?将鼠标指针移到按钮上时如何显示更多信息？
【发布时间】：2012-04-18 13:38:53
【问题描述】：

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

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

我该怎么做？

【问题讨论】：

您使用什么标记？
这个链接可以帮助你找到你想要的：1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign
是的。 ...但是您的 HTML 标记采用什么结构？显示您的代码。

标签： javascript jquery ruby-on-rails ruby jquery-ui

【解决方案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/

【讨论】：

【解决方案2】：

查看Qtip jQuery 工具提示插件。

【讨论】：

【解决方案3】：

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

华丽：http://vadikom.com/demos/poshytip/
颜色提示：http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html
抱怨：http://jamescryer.github.com/grumble.js/

网络搜索会出现更多。

【讨论】：

【解决方案4】：

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

类似：

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

【讨论】：

我想给信息文本一些样式。可以为title 属性做这个吗？