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>

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

enter image description here

我想要的是：

有人能告诉我我错过了什么吗？由于
http://plnkr.co/edit/K21dTDcDqAUmasi3yrDd?p=preview

Answer 1

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

$(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>

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与官方示例

2 个答案: