引导工具提示 $(...).tooltip 不是函数答案

【问题标题】：Bootstrap tooltip $(...).tooltip is not a function引导工具提示 $(...).tooltip 不是函数
【发布时间】：2020-02-07 15:41:01
【问题描述】：

我收到以下代码的上述错误。文档说你只需要 jQuery 和 Bootstrap，然后工具提示就在那里。如果使用 bootstrap min 版本，也不需要 popper。

为什么它不起作用？我搜索了几个小时，似乎没有人有同样的问题。提前感谢您的帮助。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!">
</div>

【问题讨论】：

您发布的代码没有问题 - 请参阅 codepen.io/jenko3000/pen/GRJgpmJ
代码有效 - 正如您从我编辑的问题中看到的 sn-p 所示。我能看到的唯一问题是工具提示的位置在左上角，根据您的 HTML 结构，可能会被截断。我建议将工具提示位置移到更合适的位置
这能回答你的问题吗？ .tooltip() is not a function

标签： javascript jquery twitter-bootstrap tooltip

【解决方案1】：

工具提示需要popper.js 才能工作。确保在 bootstrap.min.js 之前包含它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input type="text" data-toggle="tooltip" title="hi there!">
</div>

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

【讨论】：

在 Bootstrap3 中，tooltip 或 popover 或 dropdown 不需要 popper.js 库。

【解决方案2】：

您需要添加bootstrap.min.css文件，也可以通过data-placement属性设置工具提示的位置并将值设置为top、bottom、left或right .
Bootstrap3 工具提示文档：https://getbootstrap.com/docs/3.3/javascript/#tooltips

$(document).ready(function() {
  //Tooltip initialization
  $('[data-toggle="tooltip"]').tooltip();
});

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<br><br>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <input type="text" class="form-control" data-toggle="tooltip" title="hi there!">
    </div>
  </div>
</div>

【讨论】：