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

时间:2012-03-21 18:55:14

标签: ruby-on-rails twitter-bootstrap

我是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

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

2 个答案:

答案 0 :(得分:6)

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

如果您希望手动执行此操作,可以选择将文件(包括您要使用的所有插件,在您的情况下为bootstrap-tooltip.jsbootstrap-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

答案 1 :(得分:4)

我使用类似的东西添加了一个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进行分析。