Twitter 引导工具提示不起作用

Question

我有这个 HTML：

<li><a href="<?php echo $home; ?>" title="Go Home" data-placement="bottom" rel="tooltip"><?php echo $text_home; ?></a></li>

然后在一个外部文件中有这个代码：

function showtooltip() {
    $('a[rel="tooltip"], button[rel="tooltip"], input[rel="tooltip"]').tooltip({
        animation: true
    });
}

$(document).ready(function() {
   showtooltip();
});

但没有显示工具提示。我包括 jquery（最新的 2.0.0）和完整的 TB（2.3.1）问题在哪里？ （请看第二次编辑可能有问题）

编辑我也包含了这个 CSS 文件：

<link href="/catalog/view/theme/viaenvia/stylesheet/bootstrap.min.css" rel="stylesheet">
<link href="/catalog/view/theme/viaenvia/stylesheet/font-awesome.css" rel="stylesheet">
<link href="/catalog/view/theme/viaenvia/stylesheet/bootstrap-responsive.min.css" rel="stylesheet">

所以我认为 CSS 不是问题

EDIT2 我正在使用最新的 jQuery UI (1.10.2)，显然 jQuery UI 中的 JS 和 CSS 正在覆盖 Twitter Bootstrap。这是我包含 CSS 的行（JS 包含在底部以提高性能）

<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/bootstrap.min.css" />
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/font-awesome.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/bootstrap-responsive.min.css" />

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/style.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/flexslider.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/js/fancybox/jquery.fancybox.css">

如何避免这种情况？

Answer 1

您的示例代码正在运行（请参阅fiddle），因此它可能是缺少 javascript 参考。

要使用工具提示，您需要在引用 jquery 之后包含bootstrap.js（带有所有插件）或至少bootstrap-tooltip.js（请参阅customize download page 上的选项）。

（在下面的用户 cmets 之后）

我建议现在检查两件事：

• 在Net选项卡上，尝试查找bootstrap.min.js文件的请求，看看是否成功完成
• 在Console 选项卡上，运行该选择器$('a[rel="tooltip"], ... 以查看它是否找到标签；如果是这样，您应该可以调用 $('#element').tooltip('show') 之类的东西来测试工具提示是否已成功加载。