如何在 Rails 3.1 中创建悬停弹出窗口答案

【问题标题】：How to create hoverover popups in Rails 3.1如何在 Rails 3.1 中创建悬停弹出窗口
【发布时间】：2011-12-22 19:45:41
【问题描述】：

我一直在寻找一种方法来实现悬停弹出窗口，但没有成功。因为它在很多网站上都使用过，所以我认为很容易找到说明，但我想知道我是否遗漏了一些基本的东西。我查看了 qTips2 和其他一些，但这些似乎超出了我的需要。

我有一个 Rails 3.1 应用程序，并且希望在用户将鼠标悬停在表格中的一行上时显示更多详细信息。这是我缺少的 Rails 内置的东西，还是我需要一个附加组件？

我当然会感谢有人指出我正确的方向。

【问题讨论】：

这将是一个简单的悬停 div。
这不是 Rails 问题，而是 CSS 或 JavaScript 问题。
哈！在我开始之前添加了 javascript 和 css 标签。
我们需要更多解释：1) 'hover-over popup' 是什么意思（只是默认的浏览器工具提示，可设置样式的多行 div，...？） 2) 什么您的表格 html 看起来像什么，哪些项目应该触发鼠标悬停？
这应该被标记为例如的副本stackoverflow.com/questions/3559467/…、stackoverflow.com/questions/18359193/plain-javascript-tooltip 或 stackoverflow.com/questions/11683620/…。当前显示的副本已被删除。

标签： javascript css ruby-on-rails ruby-on-rails-3

【解决方案1】：

使用一些 CSS 和 Javascript！

这是一个你可以玩的例子：http://jsfiddle.net/cdpZg/

复制到这里，以防万一。

HTML：

<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div>I a piece of useless information. No use hovering over me.</div>

CSS：

#popup {
    height: 50px;
    width: 200px;
    text-align: center;
    vertical-align:middle;
    background-color: cornflowerblue;
    color: white;
    display: none;
    padding-top: 8px;
    position: absolute;
}

Javascript：

$(document).ready(function() {
    $('#user').hover(function() {
        $('#popup').show();
    }, function() {
        $('#popup').hide();
    });
});

【讨论】：

感谢 Sergi，为了其他人的利益...为了让它在我的 Rails 3.1 应用程序中工作，我不得不用 $(document).ready(function(){ "javascript goes here" }); 覆盖 Javascript
@SteveO7 是的，这是一些基本的东西。我会更新我的答案，以防万一:-)
有时这些基本的东西会花费你很多时间！再次感谢
祝你的项目好运 :-)

【解决方案2】：

只需像这样在链接上设置标题

<a title="Some text that will show up when I hover over this link">My link</a>

【讨论】：

我不知道它这么简单...我过着隐蔽的桌面生活，刚刚进入 Rails 开发。谢谢！
@SteveO7 没问题，如果对您有用，请将您的问题标记为已回答以供将来参考，很高兴我能提供帮助
巴萨姆，有没有办法在非链接上做到这一点？我要使用它的是表格中的“”。
@SteveO7 是的，你应该可以，这里有一个链接，你可以阅读更多关于它的信息，w3schools.com/tags/att_standard_title.asp
任何 HTML 标签，如
Some Text