Question

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

<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

中

但似乎我不知道如何让它发挥作用。所以我需要有关如何使用它的详细说明。

Answer 1

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

如果您希望手动执行此操作，可以选择将文件（包括您要使用的所有插件，在您的情况下为bootstrap-tooltip.js和bootstrap-popover.js）放入{{1}并将它们包含在/vendor/assets/javascripts中，如此：

application.js

对//= require bootstrap-min.js //= require bootstrap-tooltip.js //= require bootstrap-popover.js CSS文件执行相同操作，方法是将其放入bootstrap.css并将其包含在/vendor/assets/stylesheets中，方法是在/app/assets/stylesheets/application.css下添加以下一行：

*= require_self

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

加载Bootstrap后，您可以使用以下代码段来初始化您选择的元素上的popover插件：

bootstrap-min

您可以将上述代码段放在$('.label-with-popover').popover(placement: 'right') # Note: 'right' is default的底部，但推荐的方法是将其放在与您正在使用的脚手架相对应的.coffee文件中，例如application.js

最后..

users.js.coffee

Answer 2

我使用类似的东西添加了一个popover助手：

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进行分析。

如何在Rails中使用Twitter-Bootstrap hover popover

2 个答案: