Twitter bootstrap 引导工具提示css与官方示例不同_Twitter Bootstrap_Twitter Bootstrap 3_Twitter Bootstrap Tooltip

Twitter bootstrap 引导工具提示css与官方示例不同

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 引导工具提示css与官方示例不同,twitter-bootstrap,twitter-bootstrap-3,twitter-bootstrap-tooltip,Twitter Bootstrap,Twitter Bootstrap 3,Twitter 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> 但工具提示样式如下所示：我想要的是：有人能告诉我我错过了什么吗

我使用的是引导工具提示，但样式与官方示例不同。我已经导入了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>

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

我想要的是：

有人能告诉我我错过了什么吗？谢谢

您需要先初始化工具提示。根据，代码如下所示：

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

将上述代码放在

编辑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>

jQuery的标记必须位于引导标记之前。你把它们放错顺序了。如果查看JavaScript控制台，您会看到：

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

这表明了这个错误。

你能不能创建一个关于这个行为的SO代码片段，而不是提供一个屏幕截图？此外，请准确说明错误行为是什么以及所需的行为是什么。@PatrickRoberts谢谢你的建议，我已经编辑了我的问题，并附上一个plunker链接，谢谢你的帮助请在问题本身中发布代码。现在人们只能猜测最初的问题是什么，或者修复了什么，你能修改plunker演示吗？添加此js代码时，没有任何更改。谢谢顺便说一句，有两件事是错误的，第一件是引导后的jQuery，第二件是之前的工具提示没有初始化。没有原始代码，读者无法看到这个答案修复了什么。虽然这是OP的责任，但你可能应该说得更清楚