Using Rails 3.2 and Twitter Bootstrap “bootstrap-popover.js" and "bootstrap-tooltip.js" here

This is what I'd like to happen :

for when I hover over:

 <li>
  <a href="#" class="thumbnail"><img src="" alt=""></a>
 </li>

In both “bootstrap-popover.js" and "bootstrap-tooltip.js" I have $('a').popover(placement:'top');.

What other options could I possibly specify in order to have the popout appear like it is in the picture above, with options "A title" and "And here's some amazing content. It's very engaging right?"

Here's a pic of what I currently get:

Thanks.

Using Rails 3.2 and Twitter Bootstrap “bootstrap-popover.js" and "bootstrap-tooltip.js" here

This is what I'd like to happen :

for when I hover over:

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

In both “bootstrap-popover.js" and "bootstrap-tooltip.js" I have $('a').popover(placement:'top');.

What other options could I possibly specify in order to have the popout appear like it is in the picture above, with options "A title" and "And here's some amazing content. It's very engaging right?"

Here's a pic of what I currently get:

Thanks.

• javascript
• jquery
• twitter-bootstrap
• ruby-on-rails-3.2

Share Improve this question Follow edited May 18, 2012 at 23:50 Elias7 asked May 18, 2012 at 18:47 Elias7Elias7 12.9k1313 gold badges3838 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Here is a working example of what it sounds like you want: http://jsfiddle/chapmanc/DuKCg/4/

Also you only need to put the line of javascript in one place. I usually create a new .js file with all my custom functions and include that in my page the same way you are including the popover and tooltip scripts.

For example the bottom of your file might look like:

<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="js/bootstrap-popover.js" type="text/javascript"></script>
<script src="js/customFunctions.js" type="text/javascript"></script>

With customFunctions.js having the:

$('a').popover({placement:'right'});