.NET Core中Bootstrap Tooltip与Modal无法协同生效的问题
问题核心原因
两个报错本质都是版本不匹配、脚本加载缺失/重复导致的:
- 触发
$('#journalEntryModal').modal is not a function的原因:Nuget分发的Bootstrap 4.6包采用拆分式JS结构,主入口bootstrap.js不会包含Modal、Tooltip这类独立插件的代码,没有引入对应插件文件的话,自然找不到.modal()方法;且该包默认不会自动引入适配版本的Popper脚本。 - 触发Tooltip报
Object is not a constructor的原因:Bootstrap 4.6 原生仅兼容Popper 1.x版本,你手动引入的Popper 2.9.0 与1.x版本API完全不兼容,Bootstrap内部按照Popper 1.x的导出结构调用构造方法时,在2.x版本的导出结构里找不到对应构造器,就会抛出这个错误。
落地解决步骤
- 替换不兼容的Popper版本,优先使用官方打包好的合并脚本:
删掉当前单独引入的~/lib/popper.js/umd/popper.js和~/lib/bootstrap-4.6.0/js/bootstrap.js,替换为Bootstrap 4.6 自带的合并版脚本~/lib/bootstrap-4.6.0/js/bootstrap.bundle.js。这个文件已经内置了和Bootstrap 4.6完全适配的Popper 1.x代码,不需要单独引入Popper,从根源上避免版本错配问题。 - 保持现有脚本引入顺序不变:
所有jQuery相关的脚本(你当前配置里的jquery、jqueryui、各类jquery业务插件)全部放在Bootstrap bundle脚本前面,不要颠倒顺序——Bootstrap 4的所有插件都依赖全局jQuery实例,顺序错了会导致所有插件方法找不到。 - 如果坚持使用拆分版的Nuget Bootstrap包:
不要只引入主bootstrap.js,需要按需补充引入缺失的插件文件:- 引入modal插件文件,才能调用
.modal()方法 - 引入tooltip、popover插件文件,才能启用Tooltip功能
- 配套引入和Bootstrap 4.6适配的Popper 1.16.1版本脚本(umd目录下的生产版),绝对不要用Popper 2.x及以上版本。
- 引入modal插件文件,才能调用
避坑提醒
- 不要重复加载多个版本的Popper脚本,哪怕是同版本的重复引入也会导致内部实例冲突
- 不要搭配Bootstrap 4.6 使用Popper 2.x,这个组合是官方明确不兼容的,Popper 2.x仅从Bootstrap 5.0开始支持
- 引入脚本后可以在浏览器控制台执行以下命令验证方法是否挂载成功:
typeof $.fn.modal typeof $.fn.tooltip如果返回
function类型,就代表插件加载正常。
内容的提问来源于stack exchange,提问作者Val
相关产品推荐
相关产品推荐

