Question

Newbie to Ruby on Rails and Twitter Bootstrap 😛

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!!!

Answer 1

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>