bootstrap tooltip css 和官方例子不一样

Question

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

<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

Answer 1

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

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

将上述代码放在 <script></script> 中 </body>

之前

编辑 1：

始终在 Twitter bootstrap 引用之前包含 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>

Answer 2

jQuery 的 <script> 必须在 Bootstrap 的 <script> 标签之前。你把它们放在错误的顺序。如果您查看 JavaScript 控制台，您会看到：

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

这表明这个错误。

bootstrap tooltip css 和官方例子不一样

bootstrap tooltip css is not the same as the official example

twitter-bootstrap

twitter-bootstrap-3

twitter-bootstrap-tooltip