当通过webpack导入时,引导工具提示不适用于jquery.slim

xv8emn3q  于 2023-03-29  发布在  jQuery
关注(0)|答案(2)|浏览(113)

我安装了npm bootstrap 4.6.0和jquery 3.6.0。
此代码有效:

import jQuery from "jquery/dist/jquery";
import "bootstrap/dist/js/bootstrap";
    
(function ($) {
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
})(jQuery);

此代码不起作用,错误为Uncaught TypeError: $(...).tooltip is not a function
请注意,唯一的区别是使用jquery slim代替了jquery。

import jQuery from "jquery/dist/jquery.slim";
import "bootstrap/dist/js/bootstrap";
    
(function ($) {
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
})(jQuery);

其他引导功能(例如折叠)甚至可以与slim一起工作。
看起来由于某种原因, Bootstrap 无法加载一些函数,比如tooltip(也尝试了scrollspy,同样的问题)
我也试过console.log($.fn),实际上用jquery slim我找不到一堆函数...

s4n0splo

s4n0splo1#

根据官方文档Tooltips Bootstrap
工具提示依赖于第三方库Popper.js进行定位。您必须在bootstrap.js之前包含popper.min.js或使用包含Popper.js的bootstrap.bundle.min.js/bootstrap.bundle.js才能使工具提示工作!
所以你需要在jQuery和Bootstrap之间安装它。或者你可以只安装bootstrap.bundle.min.js和已经包含Popper.js的bootstrap.bundle.js。

jckbn6z7

jckbn6z72#

Bootstrap的工具提示功能依赖于完整版的jQuery,它不包含在精简版的jQuery中。精简版的jQuery是一个较小的版本,排除了一些不太常用的功能,包括Bootstrap所依赖的一些jQuery插件。
要在jQuery的精简版本中使用Bootstrap的工具提示功能,您可以单独包含工具提示插件。您可以在导入bootstrap模块后将以下行添加到代码中:

import "bootstrap/js/dist/tooltip";

这将单独导入工具提示插件,并使其可用于jQuery的精简版本。
下面是一个示例,说明如何修改代码以使用带有Bootstrap工具提示插件的jQuery精简版:

import jQuery from "jquery/dist/jquery.slim";
import "bootstrap/dist/js/bootstrap";
import "bootstrap/js/dist/tooltip"; // add this line
    
(function ($) {
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
})(jQuery);

相关问题