Rails 3.1 - 需要显示带有字段内容的 JS 弹出窗口 - 可以轻松完成吗？

Question

我所显示的表格的屏幕空间有限，因此我显示了描述字段的截断视图：

<td><%= simple_format car.description.truncate(200, :separator => ' ') %></td>

我需要将鼠标悬停或单击事件来生成一个简单的弹出窗口（一个“警报”、一个“工具提示”、“对话框”等）显示 car.description 字段的完整内容。

我是公认的 JS 菜鸟。我看到的所有 JS-Rails 教程/信息都集中在不引人注目的 JS 上，主要处理 AJAX/远程服务器交互。我没有看到任何有助于理解如何在视图中的丰富 JS UI 功能中使用 Rails 应用程序中的数据的内容。我看到了一个工具提示 gem，但是使用该 gem，工具提示内容是静态生成的，并且工具提示保存在自己的表中。它无法根据从数据库中提取的字段动态生成工具提示。

有没有一些非常非常简单的方法让 JS 弹出 Rails 字段中保存的文本？

Answer 1

我创建了一个虚拟 Rails 项目@ https://github.com/rahul/SO_9347471。我使用了 twitter 的 bootstrap @ http://twitter.github.com/bootstrap/index 提供的模态库.html。

下载该项目，然后

1. 捆绑安装
2. rake db:migrate
3. rake db:seed
4. Rails 服务器
5. 在浏览器中点击 localhost:3000

我为每辆车创建了一个模态 div，当引导 javascript 库加载时，它将所有此类 div 转换为引导模态（并且隐藏它们，等待用户单击截断的文本）

========================================

看看

http://jqueryui.com/demos/dialog/

然后

http://twitter.github.com/bootstrap/javascript.html#modals

它们包含易于理解的文档来帮助您开始吧。如果您需要更多说明，请告诉我。

Answer 2

我想我会发布我的最终解决方案。我能够严格使用 HTML 和 CSS 来解决这个问题 - 不需要 JS。每当光标移动到截断的描述上时，就会立即出现一个弹出窗口，然后随着鼠标移开而消失。

这是我使用的 HTML：

<a href="#" class="tt"><%=  @car.description.truncate(90, :separator => ' ') %>
    <span class="overlay"><%=  simple_format @car.description %></span>
</a>

然后我添加了以下 CSS：

/*  *****************  tool tips  ********************/
a.tt p {
    position:relative;
    z-index:24;
    color: #0066CC;
    text-decoration:none;
}
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    z-index:25;
    top:0px; left:0;
    padding: 15px 0 0 0;
    color: #993300;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
}
a.tt:hover span.overlay{ /* different middle bg for stretch */
    display: block;
    position:absolute;
        z-index:27;
    padding: 0 8px; 
    background: #E4EBF0;
    width: 250px;
}