样式化"popovers"在Rails 3.2中的Twitter Bootstrap的"bootstrap-popover.js"中 [英] Styling "popovers" in Twitter Bootstrap's “bootstrap-popover.js” in Rails 3.2

问题描述

使用Rails 3.2和Twitter引导程序"bootstrap-popover.js"和"bootstrap-tooltip.js"

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

这就是我想发生的事情:

This is what I'd like to happen :

当我将鼠标悬停时:

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

在"bootstrap-popover.js"和"bootstrap-tooltip.js"中，我都有 $('a').popover(placement:'top'); .

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:

谢谢.

推荐答案

这是一个听起来像您想要的工作示例: http://jsfiddle.net/chapmanc/DuKCg/4/

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

此外，您只需要将javascript行放在一个位置即可.通常，我会使用所有自定义功能创建一个新的.js文件，并将其包含在页面中的方式与添加弹出框和工具提示脚本的方式相同.

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>

customFunctions.js具有:

With customFunctions.js having the:

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

这篇关于样式化"popovers"在Rails 3.2中的Twitter Bootstrap的"bootstrap-popover.js"中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！