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

Question

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

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

在此处输入图像描述

我该怎么做？

score 2 · Accepted Answer

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

HTML

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

CSS

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

score 1 · Accepted Answer

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

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

网络搜索会出现更多。

score 1 · Accepted Answer

1

查看Qtip jQuery 工具提示插件。

于 2012-04-18T13:41:56.683 回答

score 0 · Accepted Answer

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

就像是：

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

4 回答 4