0

我有这个 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">

如何避免这种情况？

4

1 回答 1

3

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

要使用工具提示，您需要在引用 jquery 之后包含bootstrap.js（与所有插件一起）或至少包含bootstrap-tooltip.js（参见自定义下载页面上的选项）。

（在下面的用户评论之后）

我建议现在检查两件事：

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