How to use Twitter-Bootstrap hover popover with Rails

Question

I am a newbie with rails, I want to use the Twitter-Bootstrap hover popover in my rails app. I have the following part:

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

If the user hover on the :first_name label, a message appear telling him something. But I don't know where to put things in my app like the js files reference or the function.

I tried this example and put the javascript_include_tag in the layout/application.html.erb

But seems that I don't know how to get it works. So I need a detailed description about how to use it.

Answer 1

There are several* Rails* Bootstrap* projects that you can use for integrating Bootstrap.

If you would rather do it manually, one option is to place the files (including any plugins you want to use, which in your case would be bootstrap-tooltip.js and bootstrap-popover.js) into /vendor/assets/javascripts and include them in your application.js like so:

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

Do the same with the bootstrap.css CSS file by dropping it into /vendor/assets/stylesheets and including it in /app/assets/stylesheets/application.css by adding this line below *= require_self:

*= require bootstrap

I personally prefer using the full bootstrap.css file instead of the minified bootstrap-min because I occasionally want to browse the source. Either way, when you deploy to production, the CSS will be minified by Rails automatically via the asset pipeline.

---

Once you have Bootstrap loaded in, you can use the following snippet to initialize the popover plugin on the element of your choice:

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

You can place the above snippet at the bottom of your application.js but the recommended way is to place it in the .coffee file that is respective to the scaffold you are working with, for example users.js.coffee

And finally..

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

  ...

Answer 2

I added a popover helper using something like:

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

In your view you can run the js:

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

Along with your helper:

= popover(:model, :attribute)

This is provided that you have bootstrap already loaded as well as jquery. You can sub out the i18n with hard-coded text if you wish.