Bootstrap's popover in Rails - no console errors, but it's not rendering

Question

I'm trying to use Bootstrap's popover effect in my Rails 3.2 app (the bootstrap-sass gem). I've included all of Bootstrap's scripts in application.js, along with the popover code applied to the element I want:

assets/javascripts/application.js:
//= require bootstrap
$('#elem').popover('show')

In my view I have this test code:

<a id="elem" href="#" class="btn btn-danger" rel="popover" data-trigger='hover' data-title="Example Popover" data-content="Readymade">hover for popover</a>

When I view this page in the browser, I see no errors in Firebug, and all the tooltip/popover scripts are included. Why isn't the popover taking place on this element?

I've seen sometimes that you have to require bootstrap in your `application.js` file before jquery. I don't really understand why but some components of Bootstrap don't work unless you do that. — Justin Chmura, Feb 20 '13 at 18:27

score 3 · Accepted Answer · answered May 14 '13 at 03:25

I've stumbled upon the same issue and spent quite some time tackling it. That what has worked for me:

assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

assets/javascript/your_controller.js.coffee

$ ->
  $('#elem').popover('show')

views/your_controller/your_view.html.haml

=link_to "hover for popover", "#", id: :elem, rel: :popover, data:{title: "Example Popover", content: "Readymade", trigger: "hover"}

I would suspect that in your case the sufficient change will be

assets/javascript/your_controller.js

$(document).ready(function() {
  $('#elem').popover();
});

Thanks for taking the time to leave this comment - better late than never! :) — hlh, Jun 04 '13 at 16:56

Bootstrap's popover in Rails - no console errors, but it's not rendering

1 Answers1