即使安装了JQuery和Bootstrap，工具提示仍然无法工作

看似类似的问题存在here和here但提供的答案未能解决我的情况。即使安装了JQuery和Bootstrap，工具提示仍然无法工作

我的服务器上有一个Node/Express/Webpack堆栈，我使用npm安装Bootstrap 4 alpha 6以及tether.js，这是工具提示功能所需的依赖项。在我的主要JS文件，如的WebPack配置定义，我一直在使用进口的系绳，并使用下面的代码片段初始化引导提示功能：

import "tether";

和：

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

然后，在我的指数.hbs（我用的车把渲染我的网页），我有下面的代码片段实现提示：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip on top"> 
    Tooltip on top 
</button>

得离谱pts编译成功，没有任何错误或警告。但是，在浏览器中加载页面时，出现错误tooltip is not a function...。这不应该发生，对吧？我可以证实，jQuery是如下面的代码片段正下方的一个初始化提示做工精细，如上图所示的渲染，没有任何打嗝：

$('p#some').html('from jquery');

正如下面可以看到，无论是jQuery和系绳插件随着一个提示在我webpack.config.js已开始文件：

plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    new ExtractTextPlugin({ filename: "../../public/dist/main.min.css" }), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery", 
     Tether: "tether", 
     "window.Tether": "tether", 
     Alert: "exports-loader?Alert!bootstrap/js/dist/alert", 
     Button: "exports-loader?Button!bootstrap/js/dist/button", 
     Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel", 
     Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse", 
     Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", 
     Modal: "exports-loader?Modal!bootstrap/js/dist/modal", 
     Popover: "exports-loader?Popover!bootstrap/js/dist/popover", 
     Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy", 
     Tab: "exports-loader?Tab!bootstrap/js/dist/tab", 
     Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip", 
     Util: "exports-loader?Util!bootstrap/js/dist/util", 
    }), 
    new webpack.LoaderOptionsPlugin({ postcss: [autoprefixer] }), 
    ]

该项目的文件是作为的情况下，内部回购here它帮助。

来源

2017-06-22 TheLearner

几个问题，因为我自己遇到类似的问题。

1）您需要在webpack.config.js的插件部分提供对popper.js的引用;

Popper: ['popper.js', 'default'],

2）在您的主js中导入所需的插件;

import 'bootstrap/js/dist/tooltip';

此处了解详情：Bootstrap 4 - Webpack install

来源

2017-10-18 23:56:22 partypete25

即使安装了JQuery和Bootstrap，工具提示仍然无法工作

回答

相关问题