javascript - Twitter 引导工具提示说明不起作用？

Question

我注意到我的 twitter 引导工具提示不尊重data-position.

因此，我前往Twitter Bootstrap 工具提示演示，专门查看“X 上的工具提示”示例，这就是我得到的：

好像没有方向支持？

但是，工具提示继承自（或者可能是相反的方式？）的弹出框起作用：

浏览器尝试：

Ubuntu 12.10 上的 Chromium 24.0 Ubuntu 12.10
上的 Firefox 19.0

这是应该报告的错误，还是这里发生的其他事情？

Answer 1

Jsfiddle带有工具提示的 Jsfiddle

它不是错误，但我们需要初始化它们。
重要的 Bootstrap 网站声明“出于性能原因，选择加入工具提示和弹出框数据 API，这意味着您必须自己初始化它们。” Bootstrap 网站工具提示部分

<div class="navbar tooltip-demo">
        <ul class="nav">
          <li><a class="top" title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a></li>
          <li><a class="right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a></li>
          <li><a class="bottom" title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
          <li><a class="left" title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a></li>
        </ul>
      </div>

要使用的javascript，您必须初始化

$('a').tooltip();

Answer 2

我发现使用 Bootstrap 初始化工具提示的最简单方法是匹配他们的代码，这样你的任何工具提示都可以工作。

$(function () {
    $("[data-toggle='tooltip']").tooltip();
});

或者您实际上可以将此行添加到 bootstrap-tooltip.js 文件的最后

}(window.jQuery);  //<-- last line of bootstrap-tooltip.js

$("[data-toggle='tooltip']").tooltip();

我基本上计划是否要使用工具提示代码，那么我不妨默认启用它。所以，我把它放在我的 bootstrap-tooltip.js 文件中。

Answer 3

我认为这是一个错误。从http://twitter.github.com/bootstrap/assets/js/application.js 您可以看到使用“选择器”选项调用演示。

$('.tooltip-demo').tooltip({
  selector: "a[data-toggle=tooltip]"
});

但是bootstrap-tooltip.js中的 'show' 函数在处理 'placement' 时不会检查 'selector' 选项。因此发生了错误。

    placement = typeof this.options.placement == 'function' ?
      this.options.placement.call(this, $tip[0], this.$element[0]) :
      this.options.placement

此错误的演示：http: //jsfiddle.net/indream/xFC7G/
相关 github 问题：https ://github.com/twitter/bootstrap/issues/6832