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

56lgkhnf  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(203)

我用下面的代码得到了提到的错误。文档说你只需要jQuery和Bootstrap,然后工具提示就在那里了。如果使用bootstrap最小版本,也不需要popper。
为什么不起作用呢?我找了几个小时,似乎没有一个有同样的问题。提前感谢帮助。
第一个

wlzqhblo

wlzqhblo1#

下面的代码在Bootstrap 5中对我有用-同样的代码也适用于Bootstrap 3/4,但是请仔细检查您的版本的文档。
1.首先需要jQuery。
我已经看到一些其他线程说,你需要要求jquery-ui太-个人而言,我没有这样做,我不能说为早期的引导版本。
jQuery已经从Bootstrap 5中删除了,但是如果你的项目中有jQuery的话,它知道要使用它。要做到这一点,你必须将jQuery赋给window.jQuery--如果你试图只将它赋给$的简写,Bootstrap将找不到jQuery(这是我的问题--请看下面的例子,我是如何使用这两种方法的)
1.下一个需要@popperjs/corebootstrap之前
请确保您使用的是正确的Popper软件包,用于引导版本-4,它需要popper.js,这与@popperjs/core不同
1.最后,需要bootstrap
1.如果您希望工具提示能够处理动态加载的内容(例如,在您发出某个未来 AJAX 请求后加载的内容),则需要确保为工具提示定义了要查找的选择器。

window.jQuery = window.$ = require('jquery');

window.Popper = require('@popperjs/core');

require('bootstrap');

$('body').tooltip({
    selector: '[data-bs-toggle="tooltip"]',
});

注意:我使用的是NPM安装的软件包(即不是通过CDN安装的),需要它们从node_modules安装到我的app.js中。但是同样的方法应该也适用--特别是你需要依赖项的顺序。

  • 启动开关5.1.3
  • jQuery 3.6.0版本
  • @popperjs/内核2.11.5
fjaof16o

fjaof16o2#

工具提示需要popper.js才能工作。请确保在bootstrap.min.js之前包括popper.js
第一个

ujv3wf0j

ujv3wf0j3#

您需要添加bootstrap.min.css文件,也可以通过数据放置属性设置工具提示的位置,并将值设置为topbottomleftright
Bootstrap3工具提示文档:https://getbootstrap.com/docs/3.3/javascript/#tooltips
第一个

相关问题