Question

In app/assets/javascripts, I have saved bootstrap.js (from twitter github). I have the BootStrap CSS that pertains to popover and tooltip loaded — in app/assets/stylesheets

From my show.html.erb in app/views/questions:

    <button class="btn" id="button1"><%= @question.option_1 %></button>
    <script type="text/javascript">
    $(function() {
      $(".btn").click(function() {
      var idname = this.id;
        $("#"+idname).addClass("clicked");
        $("#"+idname).siblings().removeClass("clicked");
    });

    });

    $(function () {
      $(".btn").popover( offset: 5,
                         placement: 'left');
    });
    </script>

My application.js file in app/assets/javascripts has these as the last 3 lines:

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

It looks like they are just comments, but I looked up the syntax and it seems to be correct.

Things I have tried:
1.) Loaded all of the CSS (not just those pertaining to popover).
2.) All of the other relevant stackoverflow posts

Answer 1

I think that you have everything that you need included in your project, but I see a couple of things missing from the HTML/Javascript for your button.

First, the popover requires content that will be shown when you hover over the button. This is done by specifying information in a “data-content” attribute of the element. So your button will look like this:

<button class="btn" id="button1" data-content="Popover Content">
    <%= @question.option_1 %>
</button>

Then, in the javascript to load the popover on rollover, you’re specifying a couple of options. These will need to be wrapped in curly braces:

<script type="text/javascript">
    $(function () {
         $(".btn").popover(
            {
                offset: 5,
                placement: 'left'
            }
        );
    });
</script>

With those two changes, you should be up and running with a popover that appears on hover of your button that contains the text “Popover Content”.