Styling “popovers” in Twitter Bootstrap's “boo

问题:

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.

回答1:

Here is a working example of what it sounds like you want: http://jsfiddle.net/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'});