Webpack - Unable to use bootstrap tooltips

Question

I am using angular-cli and Webpack for an Angular2 project.

I have loaded jquery, bootstrap.css and bootstrap.js files globally from the angular-cli.json file. The config is given below-:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

I have also downloaded the bootstrap typings files from DefinetlyTyped and added them as a reference using /// <reference path="@types/bootstrap" /> in the component I want.

But when I am executing the tooltip initialization function
$('[data-toggle="tooltip"]').tooltip();

I keep getting the errors-:

Typeerror_handler.js:53TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery__(...).tooltip is not a function
    at HeaderComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:759:73)
    at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:74:74)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:69363:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:69456:44)
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:69363:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:69456:44)
    at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:51541:20)
    at http://localhost:4200/vendor.bundle.js:36682:84
    at Array.forEach (native)

What am I doing wrong ?

Can someone help me out with this ? I used the same approach for when I had to use typeahead.js and that worked flawlessly, but why isn't it working here ?

Answer 1

I solved the similar problem by using a new Function(). Sample of code:

new Function('cell', 'jQuery("[data-toggle=tooltip]", cell).tooltip();')(cellNode);