Tooltip not working despite having JQuery and Bootstrap installed

Question

Seemingly similar questions exist here and here but the answers provided don't address my situation.

I have a Node/Express/Webpack stack on my server on which I've used npm to install Bootstrap 4 alpha 6 along with tether.js, the required dependency for tooltip functionality. In my main JS file, as defined in the webpack config, I have imported tether using and initialized Bootstrap tooltip function using the following snippets:

import "tether";

and:

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

Then, in my index.hbs (I'm using handlebars to render my pages), I have the following snippet implementing the tooltip:

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

The scripts compile successfully without any error or warning. However, when loading the page in the browser, I get the error saying tooltip is not a function.... This shouldn't be happening, right? I can confirm that JQuery is working fine as the following snippet right below the one initializing tooltip as shown above is rendering without any hiccup:

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

As can be seen below, both JQuery and Tether plugins along with the one for Tooltip have been initiated in my webpack.config.js file:

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] }),
  ]

The project files are available as an internal repo here in case it helps.

Answer 1

A couple issues, as i've run into similar problems myself.

1) You need to provide reference to popper.js within the plugins section in webpack.config.js;

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

2) in your main js, import the required plugin;

import 'bootstrap/js/dist/tooltip';

More info here: Bootstrap 4 - Webpack install