如何使Twitter Bootstrap jQuery Elements（工具提示，弹出等）工作？

Question

我一直在Dreamweaver中使用Twitter Bootstrap测试页面，我绝对无法获得任何形式的弹出式，工具提示或其他Bootstrap jQuery Goodie。我从演示页面复制了代码，倒出源代码，直接链接到所有正确的JavaScript文件，但仍然没有。 CSS的工作正常，只是动画。

演示页面提到了此代码：

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

但是我不知道该怎么办，因为我在任何工作网站中都没有看到类似的东西。

如果有人可以给我任何关于（可能）我缺少的（可能）的小链接的建议，我将非常感谢。

编辑

发布此信息后，我找到了以下代码段：

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

它引起了弹出式的触发！我从未在我看到的任何工作网站的源代码中看到类似的东西。真的希望Bootstrap文档可以使像我这样的新jQuery用户更清晰地细节。

Answer 1

您需要为要显示弹出案悬停时要显示的元素指定ID或类。这是一个例子：

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

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

Answer 2

对于从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文档说这些插件的数据API被“选择”时的意思。

Answer 3

如果您需要Bootstrap Tooltip，则：

    $(function () {
        $("[rel='tooltip']").tooltip();
    });

如果您想要jQuery Tooltip，则：

    /*** Handle jQuery plugin naming conflict between jQuery UI ***/
$.widget.bridge('uitooltip', $.ui.tooltip);

    $(function () {
        $("[rel='tooltip']").uitooltip();
    });

在两种情况下，HTML都将保持不变：

  <div title="Tooltip text" rel="tooltip"> div data ... </div>