Enabling Popovers using Twitter Bootstrap's "bootstrap-popover.js" in Rails 3.2

Question

Newbie to Ruby on Rails and Twitter Bootstrap :P

Trying to add a popover to an image where, when you scroll over it, a popout appears with a larger version of the image.

The image:

<ul class="thumbnails">
  <div class="span1">
    <ul>
     <li>
      <a href="#" class="thumbnail"><img src="http://placehold.it/125x100" alt=""></a>
     </li>
  </div>
    </ul>

I'm trying to use Twitter Bootstrap's "Popovers" by adding "bootstrap-popover.js" and 'bootstrap-tooltip.js' (which it extends) to the appropriate folders in my asset directory (using Rails 3.2).

If I wanted to activate it so the popout works when I scroll over the image, how would I do this?

I'm really just not sure how to call a specific element for the popover to work on.

Thank you so much!!!

Solution

Put this javascript statement in after wherever you link your javascript files. This will activate the popover for all 'a' elements (links in your page).

$('a').popover(placement:'top');

Try this code to test it out. setting the rel, title, and data-content attributes in the link tag will activate the popever on that element.

<ul class="thumbnails">
  <div class="span1">
    <ul>
     <li>
      <a href="#" rel="popover" title="A Title" data-content="<img src='http://placehold.it/125x100'/>">Hover over me for image.</a>
     </li>
  </div>
</ul>