Question

我通过以下代码收到上述错误。该文档说，您只需要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>

Answer 1

您的代码正在运行。也许你看不到。更改数据位置，如下所示：

$(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!" data-placement="bottom">
</div>

Answer 2

工具提示需要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();
});

Answer 3

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

Bootstrap3

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

Bootstrap工具提示$（...）。tooltip不是函数

3 个答案: