如何在 Rails 中使用 Twitter-Bootstrap 悬停弹出框答案

【问题标题】：How to use Twitter-Bootstrap hover popover with Rails如何在 Rails 中使用 Twitter-Bootstrap 悬停弹出框
【发布时间】：2012-03-21 18:55:13
【问题描述】：

我是 Rails 新手，我想在我的 rails 应用程序中使用 Twitter-Bootstrap 悬停弹出框。我有以下部分：

<div class="field">
    <%= f.label :first_name, {:class => 'label'}%>&nbsp;
    <%= f.text_field :first_name ,{:class => 'span3',}%>
</div>

如果用户将鼠标悬停在:first_name 标签上，则会出现一条消息告诉他一些事情。但我不知道在我的应用程序中的什么地方放置诸如 js 文件引用或函数之类的东西。

我试过这个example 并将javascript_include_tag 放在 layout/application.html.erb 中

但似乎我不知道如何让它工作。所以我需要一个关于如何使用它的详细说明。

【问题讨论】：

你使用的是什么 Rails 版本？

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

您可以使用 several* Rails* Bootstrap* 项目来集成 Bootstrap。

如果您希望手动执行此操作，一种选择是将文件（包括您要使用的任何插件，在您的情况下为 bootstrap-tooltip.js 和 bootstrap-popover.js）放入 /vendor/assets/javascripts 并将它们包含在您的application.js 像这样：

//= require bootstrap-min.js
//= require bootstrap-tooltip.js
//= require bootstrap-popover.js

对bootstrap.css CSS 文件执行相同操作，将其放入/vendor/assets/stylesheets 并将其包含在/app/assets/stylesheets/application.css 中，方法是在*= require_self 下方添加此行：

*= require bootstrap

我个人更喜欢使用完整的bootstrap.css 文件而不是缩小的bootstrap-min，因为我偶尔想浏览源代码。无论哪种方式，当您部署到生产环境时，Rails 都会通过资产管道自动缩小 CSS。

一旦你加载了 Bootstrap，你可以使用下面的 sn-p 来初始化你选择的元素上的 popover 插件：

$('.label-with-popover').popover(placement: 'right') # Note: 'right' is default

您可以将上面的 sn-p 放在 application.js 的底部，但推荐的方法是将其放在与您正在使用的脚手架相对应的 .coffee 文件中，例如 users.js.coffee

最后..

  <label class="label-with-popover"
         data-content="popover content"
         data-title="popover title">

  ...

【讨论】：

谢谢，我不明白这些行：对 CSS 文件执行相同操作，将其放入 /vendor/assets/stylesheets 并通过 *= require bootstrap 将其包含在 application.css 中
我应该把这个放在哪里` $('.label-with-popover').popover(placement: 'right')`
我编辑了帖子以详细说明说明。如果您有任何其他问题，请告诉我；就在几个月前，我还在学习这种性质的东西应该放在哪里，所以我记得很深。
谢谢，我按照每一步都做了，但还是不行，不知道为什么？？
检查包含标签是否出现在您生成的源代码中。如果是，请打开文件进行验证，路径应如下所示：http://0.0.0.0:3000/assets/bootstrap-popover.js（或者使用 Chrome Inspector 检查是否已加载必要的文件。

【解决方案2】：

我使用类似的方法添加了一个弹出窗口助手：

module PopoverHelper
  def popover(model_name, attribute)
    i18n_base = "simple_form.popovers.#{model_name.downcase}.#{attribute}"

    content_tag(:i, '', class: "icon-question-sign",
                        id: "#{attribute}_help",
                        title: I18n.t("#{i18n_base}.title"),
                        data: {
                            # don't use popover as it conflicts with the actual pop-over thingy
                            pop_over: true,
                            content: I18n.t("#{i18n_base}.text")
                        })
  end
end

在你看来你可以运行js：

$("[data-pop-over]").popover({placement: 'right'});

和你的助手一起：

= popover(:model, :attribute)

前提是您已经加载了引导程序以及 jquery。如果您愿意，可以使用硬编码文本替代 i18n。

【讨论】：