Search code examples
ruby-on-railstwitter-bootstrap-rails

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


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?


Solution

  • 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();
    });