如何让 Twitter Bootstrap jQuery 元素（工具提示、弹出框等）工作？答案

【问题标题】：How to get Twitter Bootstrap jQuery Elements (tooltip, popover, etc) working?如何让 Twitter Bootstrap jQuery 元素（工具提示、弹出框等）工作？
【发布时间】：2012-02-15 22:45:15
【问题描述】：

我一直在 Dreamweaver 中使用 Twitter Bootstrap 测试页面，但我绝对无法使用任何类型的弹出框、工具提示或其他 Bootstrap jQuery 好东西。我已经从演示页面复制了代码，倾注了源代码，直接链接到所有正确的 JavaScript 文件，但仍然没有。 CSS 工作正常，只是没有动画。

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

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

但我不知道如何处理这样的事情，因为我在任何工作网站上都没有看到这样的事情。

如果有人可以就我丢失的（可能）微小链接给我任何建议，我将不胜感激。

编辑

我在发布后发现了以下代码sn-p：

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

它触发了弹出框！我从未在我看到的任何工作站点的源代码中看到类似的东西。真希望 Bootstrap 文档能让像我这样的新 jQuery 用户更清楚地了解这些微小的细节。

【问题讨论】：

您是否在控制台中看到任何问题？也许这可能表明出了什么问题
在您的 HTML 源代码中包含 <script> 声明也是一个好主意。
如果您真的是 jQuery 新手并且正在阅读本文，请注意两点：a) jQuery 不附带 Twitter Bootstrap；您需要下载它，并且 b) 他们提供的示例使用的 js 和 CSS 路径与您将使用的不同（并且还包括特定模块而不仅仅是 js/bootstrap.js），因此请务必编辑路径和 js模块名称。

标签： jquery twitter-bootstrap popover

【解决方案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 是“选择加入”的意思。

【讨论】：

是的，这是最新版 Bootstrap 的一个已知问题：github.com/twitter/bootstrap/issues/7163。如果你想解决这个问题，请在 GitHub 上提出这个问题，它已经在问题列表中放置了很长时间了。
@vfcosta：该问题已在此期间得到解决。你能发表你的评论吗？谢谢。
initialization code recommended by Bootstrap now 不同：$(function () { $('[data-toggle="popover"]').popover() })

【解决方案2】：

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

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

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

【讨论】：

感谢卡尔文！我只是碰巧找到了与您响应的代码类似的 sn-p。希望 Bootstrap 文档能更清楚地说明这一点。
@KyleCarson，我同意，只是遇到了同样的问题。

【解决方案3】：

如果你想要引导工具提示，那么：

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

如果你想要 Jquery 工具提示，那么：

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

【讨论】：