Angular-cli: Webpack - Unable to use bootstrap tooltips

[Sitronik]

I am using angular-cli for an Angular4 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"
      ],

But when I am executing the tooltip initialization function in the component

$('[data-toggle="tooltip"]').tooltip();

I keep getting the errors:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery__(...).tooltip is not a function
    at HTMLDocument.<anonymous> (comments.component.ts:66)
    at mightThrow (jquery.js:3583)
    at process (jquery.js:3651)
    at ZoneDelegate.webpackJsonp.593.ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4116)
    at ZoneDelegate.webpackJsonp.593.ZoneDelegate.invokeTask (zone.js:397)
    at Zone.webpackJsonp.593.Zone.runTask (zone.js:165)
    at ZoneTask.invoke (zone.js:460)
    at timer (zone.js:1540)

How can I resolve this issue?

[dave11mj]

Since tooltip isn't a default jQuery method, have you tried adding something like the snippet below, on src/typings.d.ts ?

interface JQuery {
   tooltip(options?: any): any;
}

[Sitronik]

@dave11mj I tried adding.

interface JQuery {
   tooltip(options?: any): any;
}

But I still get errors:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery__(...).tooltip is not a function
    at HTMLDocument.<anonymous> (comments.component.ts:66)
    at mightThrow (jquery.js:3583)
    at process (jquery.js:3651)
    at ZoneDelegate.webpackJsonp.593.ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4116)
    at ZoneDelegate.webpackJsonp.593.ZoneDelegate.invokeTask (zone.js:397)
    at Zone.webpackJsonp.593.Zone.runTask (zone.js:165)
    at ZoneTask.invoke (zone.js:460)
    at timer (zone.js:1540)

What can I else to do?

[filipesilva]

I think you're trying to both use jquery as a global lib, and as an imported local lib. Since you're the bootstrap script is patching the global version only, the import you get does not have .tooltip.

In this case it's better to never do import * as jquery from 'jquery' and instead treat it as a global library by adding declare var jquery: any to src/typings.d.ts.

[Sitronik]

@filipesilva Thanks for your answer. You helped me to resolve my problem. In this case to resolve issue I added to src/typings.d.ts:

declare var jquery: any;

interface jquery {
  tooltip(options?: any): any;
}

[filipesilva]

@Sitronik I'm really glad you were able to get it working, I always feel like it's super hard to explain the difference between imported and global libs. I think I'll add your tooltip example to the docs.

[HardikChauhan2013]

if nothing work than last you can try eval("$('[data-toggle=\"tooltip\"]').tooltip();"); which is work.

[pptyasar]

@Sitronik could u give template code

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}