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

Question

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

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

我会非常感谢有人能指点我正确的方向。

- SteveO7

---

这将是一个简单的悬停 div。 - Sergio Tulentsev

这不是一个Rails问题，而是一个CSS或JavaScript问题。 - Wizard of Ogz

哈！在我来得及处理之前，javascript和css标签已经被添加了。 - Wizard of Ogz

我们需要更多的解释：1）您所说的“悬停弹出窗口”是什么意思（只是默认浏览器工具提示，可样式化的多行div等等？）2）您的表格HTML长什么样，哪些项目应该触发鼠标悬停？ - ptriek

这应该被标记为重复，例如 https://dev59.com/unA65IYBdhLWcg3w7DT8、https://dev59.com/HWMl5IYBdhLWcg3we3Ho 或 https://dev59.com/Umgt5IYBdhLWcg3w-SFM。当前显示的重复已被删除。 - Ilmari Karonen

Answer 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();
    });
});

- Sergio Tulentsev

---

谢谢Sergi， 为了让其他人也受益...为了让这个在我的Rails 3.1应用程序中工作，我必须用以下代码包围JavaScript：$(document).ready(function(){ "javascript goes here" }); - SteveO7

@SteveO7 是的，那是基本的东西。我会更新我的答案，以防万一 :-) - Sergio Tulentsev

有时候那些基础的东西会花费你很多时间！再次感谢。 - SteveO7

祝你的项目好运 :-) - Sergio Tulentsev

Answer 2

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

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

- Bassam Mehanni

---

我完全不知道原来它是那么简单的... 我一直过着与世隔绝的桌面生活，现在才开始涉足Rails开发。谢谢！ - SteveO7

@SteveO7 没问题，如果这对你有帮助，请标记你的问题已解决以供日后参考，很高兴能够帮到你。 - Bassam Mehanni

Bassam，有没有办法在非链接上实现这个功能？我想在表格中的"<td>"上使用它。 - SteveO7

@SteveO7 是的，你应该能够实现，这里有一个链接，你可以阅读更多相关信息：http://www.w3schools.com/tags/att_standard_title.asp - Bassam Mehanni

任何HTML标签，例如<div title="这是悬停时显示的内容">一些文本</div>。 - sms