尽管安装了JQuery和Bootstrap,工具提示仍无法正常工作

Question

看似相似的问题在这里和这里存在,但提供的答案并没有解决我的情况.

我的服务器上有一个Node/Express/Webpack堆栈,我在其上使用npm来安装Bootstrap 4 alpha 6以及tether.js,这是工具提示功能所必需的依赖项.在我的主JS文件中,如webpack配置中所定义的,我使用以下代码段导入了使用和初始化Bootstrap工具提示函数的tether:

import "tether";

和:

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

然后,在我的index.hbs中(我使用把手来渲染我的页面),我有以下片段实现工具提示:

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

脚本编译成功,没有任何错误或警告.但是,在浏览器中加载页面时,我收到错误消息tooltip is not a function....这应该不会发生,对吧？我可以确认JQuery工作得很好,因为如上所示,在一个初始化工具提示下面的下面的代码片段正在渲染而没有任何打嗝:

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

如下所示,JQuery和Tether插件以及Tooltip插件都已在我的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] }),
  ]

该项目的文件是作为内部回购此情况下,它可以帮助.

Answer 1

有几个问题,因为我自己也遇到过类似的问题.

1)您需要在webpack.config.js的plugins部分中提供对popper.js的引用;

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

2)在你的主js中,导入所需的插件;

import 'bootstrap/js/dist/tooltip';

更多信息:Bootstrap 4 - Webpack安装