-1

我用的是bootstrap tooltip，但是样式和官方的例子不一样。
我已经导入bootstrap.js, bootstrap.css，并使用 like 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

但工具提示样式显示如下：

在此处输入图像描述

我想要的是：
在此处输入图像描述

那么有人可以告诉我我错过了什么吗？谢谢
http://plnkr.co/edit/K21dTDcDqAUmasi3yrDd?p=preview

4

2 回答 2

4

您需要先初始化工具提示。根据文档，代码在这里：

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

将上面的代码放在<script></script>前面</body>

编辑1：

始终在 Twitter 引导参考之前包含 jQuery 脚本。

因此，您的解决方案的最佳代码是：

<!DOCTYPE html>
<html>
 <head>

 <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

 <!-- jQuery First -->
 <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

 <!-- Bootstrap Reference next -->
 <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

 </head>
<body>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on Right">Tooltip on Right</button>

<script>

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

</script>
</body>

于 2015-05-19T03:21:56.323 回答
2

<script>for jQuery 必须位于Bootstrap 标记之前。<script>你有他们的错误顺序。如果您查看 JavaScript 控制台，您会看到：

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
(index):16 Uncaught TypeError: $(...).tooltip is not a function

这表明了这个错误。

于 2015-05-20T06:29:30.217 回答