我正在使用 rails v3.2.2 和 jquery-rails v2.0.2 ruby-gems。当我将鼠标指针移到按钮上时,我想显示更多信息,例如 Facebook、Google 和其他公司在其应用程序中制造的。
以下是来自 Google Gmail 的屏幕截图,显示了我想在我的应用程序中实现的内容:
我该怎么做?
我正在使用 rails v3.2.2 和 jquery-rails v2.0.2 ruby-gems。当我将鼠标指针移到按钮上时,我想显示更多信息,例如 Facebook、Google 和其他公司在其应用程序中制造的。
以下是来自 Google Gmail 的屏幕截图,显示了我想在我的应用程序中实现的内容:
我该怎么做?
有几种方法可以做到这一点,使用 CSS 和/或 JavaScript。这是一个基本的 CSS 解决方案:
HTML
<button>Button text</button>
<div class="tooltip">Tooltip Content</div>
CSS
.tooltip { display: none; }
button:hover+.tooltip { display: block; }
考虑一个工具提示库,其中有很多,包括:
网络搜索会出现更多。
查看Qtip jQuery 工具提示插件。
title
在你的按钮标签上使用属性怎么样?
就像是:
<input type="button" title="your message" value="Button" />