Twitter Bootstrap工具提示不起作用

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

您的示例代碼正在運行（請參閱此小提琴 ），因此它可能是缺少的javascript參考。

為了使用工具提示，您需要在引用jquery之后包括bootstrap.js （包含所有插件）或至少包含bootstrap-tooltip.js （請參閱定制下載頁面上的選項）。

（在下面的用戶評論之后）

我建議現在檢查兩件事：

• 在[ Net分頁中，嘗試尋找bootstrap.min.js檔案的要求，看看是否成功完成
• 在“ Console選項卡上，運行選擇器$('a[rel="tooltip"], ...以查看是否找到了標簽；如果找到，則應該可以調用$('#element').tooltip('show')來測試工具提示是否成功加載。