Bootstrap Popover Not Working with Rails

Question

I am an fairly new rails programmer (about a year or so) and am working on my first big project. It is written in haml btw.

So here is my code for the _loginaside.haml:

%a.btn.btn-info{"data-content" => "A larger popover to demonstrate the max-width of the Bootstrap popover.", "data-toggle" => "popover", href: "#", title: "Popover title"} Large popover

And my shared.js.coffee:

$(document).ready ->
  $(".btn").popover placement: "bottom"
  return

Here is the outputted html (ignore the messy li):

   <li class='login-user clearfix'></li>
    <a class='btn btn-default' data-content='Hello' data-toggle='popover' href='#' title='Popover title'>Large popover</a>
    <span class='user-icon'>
      <img alt="Login" src="/assets/login.png" />
      luke@hollowaydesignfirm.com
    </span>

And finally my header:

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/bootstrap/affix.js?body=1"></script>
<script src="/assets/bootstrap/alert.js?body=1"></script>
<script src="/assets/bootstrap/button.js?body=1"></script>
<script src="/assets/bootstrap/carousel.js?body=1"></script>
<script src="/assets/bootstrap/collapse.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.js?body=1"></script>
<script src="/assets/bootstrap/tab.js?body=1"></script>
<script src="/assets/bootstrap/transition.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script src="/assets/bootstrap/modal.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.js?body=1"></script>
<script src="/assets/bootstrap/popover.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<script src="/assets/shared.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>

The button is showing up but the popover doesn't work.

Is the `$(document).ready` code firing? You can check by adding a `console.log` statement there. If it isn't and you have Turbolinks on you might want to check out this [question](http://stackoverflow.com/q/18770517/2622934). — cschroed, Jun 08 '14 at 01:58
alert inside your `$(document).ready` or write a `console.log` statement to see if this code is executing or not — Mandeep, Jun 08 '14 at 06:51

score 1 · Answer 1 · answered Jun 12 '14 at 13:42

1

It was actually a bug in my coffescript a few lines before that wasn't letting this one load. Thanks for the help though guys!

answered Jun 12 '14 at 13:42

score 0 · Answer 2 · answered Jun 08 '14 at 13:49

Try to enclosure the popover in a div and call the a element of the div, for example

<script type="text/javascript">
    jQuery( function($) {
       $("#hint a").popover({
          trigger: "click hover"
          placement: "bottom"
       }) 
    });
</script>
<div id="hint">
    <%= link_to "Press me", "javascript:;", :"data-content" => "hello this is the content of the popover", :"data-togle" => "popover", :class => "btn btn-info" %>
</div>

i'm not that good with haml and coffee but i guest is a simple translation, note that the path is javascript:;, this prevent from redirect to a new page, hope it helps

score 0 · Answer 3 · edited Jun 09 '14 at 15:12

Please take a look at this JFiddle example of a bootstrap popover on hover

http://jsfiddle.net/GWfdJ/

You will have to translate to HAML and Coffee but it is very straight forward code to translate (see below as well).

Note I called the element by its ID not class when setting the popover function.

I also used Bootstrap CDN for the JS and CSS. To test your code, use the CDN's first so you know your assets are being loaded correctly. If the JavaScript is broken with the CDN loaded then you know it's your code, if it works with the CDN but not with your individually linked assets then you know you're missing a bootstrap file or aren't connecting assets correctly.

http://www.bootstrapcdn.com/

.html.erb

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Title of Popover" 
   data-placement="right"
>pop
</a>

.js

$(function () {
    $('#example').popover({trigger: "hover"});
});

Bootstrap Popover Not Working with Rails

3 Answers3