jquery - 如何让 Twitter Bootstrap jQuery 元素(工具提示、弹出窗口等)正常工作？

Question

我一直在 Dreamweaver 中使用 Twitter Bootstrap 测试页面，但我绝对无法让任何类型的弹出窗口、工具提示或其他 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

对于来自 Google 的人员:

您可以使用以下代码让工具提示和弹出框像其他 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 的含义。