如何让Twitter Bootstrap jQuery Elements(工具提示,popover等)工作？

Question

我一直在玩Dreamweaver中的Twitter Bootstrap测试页面,我绝对不能得到任何类型的popover,工具提示或其他Bootstrap jQuery好东西.我已经从演示页面复制了代码,倾注了源代码,直接链接到所有正确的JavaScript文件,但仍然没有.CSS工作正常,但没有动画.

演示页面提到了这段代码:

$('#example').popover(options)

但我不知道如何处理类似的事情因为我在任何工作现场都没有看到类似的东西.

如果有人能给我任何关于我可能缺失的微小链接的建议,我会非常感激.

编辑

发布此内容后,我发现了以下代码段:

$(document).ready(function() {
    $("a[rel=popover]")
        .popover({
            offset: 10
        })
        .click(function(e) {
            e.preventDefault()
        })
});

它让弹出窗口触发!我从未在我看过的任何工作网站的源代码中看到过类似的内容.真的希望Bootstrap文档可以让像我这样的新jQuery用户更清楚一点.

Answer 1

对于从谷歌来这里的人:

您可以像其他Bootstrap插件一样自动使用工具提示和弹出窗口,其代码如下:

<script type="text/javascript">
    $(function () {
        $('body').popover({
            selector: '[data-toggle="popover"]'
        });

        $('body').tooltip({
            selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
        });
    });
</script>

然后,您可以使用正常的数据属性:

<a rel="tooltip" title="My tooltip">Link</a>
<a data-toggle="popover" data-content="test">Link</a>
<button data-toggle="tooltip" data-title="My tooltip">Button</button>

这就是Bootstrap文档在说这些插件的data-api"选择加入"时的含义.

Answer 2

您需要为要悬停的元素指定要显示弹出窗口的元素的ID或类.这是一个例子:

<div id="example">Some element</div>

<script>
  $('#example').popover({
    title: 'A title!',
    content: 'Some content!' 
  })
</script>