Question

如何在twitter-bootstrap中编程popovers？我正在寻找一系列用JavaScript激活popover的说明。

Answer 1

我还没有关于JavaScript的知识，但这是我设法实现引导程序popover的方法。

确保您的文档已与popover插件和工具提示插件相关联，如果没有，请使用以下内容链接到这些文件：

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

此示例代码将呈现左侧弹出窗口，如果您想将其弹出到其他侧面，则更改位置：“左侧”到位置：“顶部”

Answer 2

我是从bootstrap示例页面的源代码中获取的：

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

您也可以尝试将此

$("a[rel=popover]")

更改为应显示弹出窗口的元素。

你如何在twitter-bootstrap中编程popovers？

2 个答案: