如何在twitter-bootstrap中编写popovers？

Question

你如何在twitter-bootstrap中编写popovers？我正在寻找一组步骤来激活JavaScript的popover。

Answer 1

我把它从引导例如页面的源代码：

$(function() { 
    $("a[rel=popover]") 
    .popover({ 
     offset: 10, 
     html: true 
    }) 
    .click(function(e) { 
     e.preventDefault() 
    }) 
}) 

您也可以尝试改变这种

$("a[rel=popover]")

到应该显示酥料饼的元素。

Answer 2

我还没有关于JavaScript的知识，但这里是我如何设法实现引导弹窗。

确保您的文件已经连起来的酥料饼的插件和工具提示插件，如果没有则用做一个链接到这些文件如下：

<script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 

插入刚刚结束标记上面的上面的代码，像这样：

<script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 

    </body> 

然后插入该脚本的结束标记上面：

<script type="text/javascript"> 
    $(function() {$("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 

因此，所有的一切，你粘贴代码应当是这样的：

<script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
     $("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 
    </script> 

    </body> 

现在，标记你的锚标签为流行的功能。像这样：

<a href="#" class="pop" title="Pop!" data-content="Some Content"> 

说明，data-content=""包含弹出窗口的内容。 title="Pop!"包含标题标题。

的class="pop"是您选择的任何类的名称，但可以肯定的名称在上面的脚本中发现的类名，也就是匹配，$("a.pop")

如果你喜欢使用一个ID，那么它应像这样，

<a href="#" id="pop" title="Pop!" data-content="Some Content"> 

和...

<script type="text/javascript"> 
     $(function() { 
     $("a#pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 
    </script> 

此示例代码将作出离开酥料饼的，如果你想在弹出它到另一侧，然后CH ange placement：'left'to place placement：'top'