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 latest（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上的选项）。

（在用户评论之后）

我建议现在检查两件事：

在Net标签上，尝试查找bootstrap.min.js文件的请求，看看是否成功完成
在Console标签中，运行该选择器$('a[rel="tooltip"], ...以查看是否找到了标签;如果确实如此，您应该可以调用类似$('#element').tooltip('show')的内容来测试工具提示是否已成功加载。

Twitter Bootstrap Tooltip无效

1 个答案: