Angular getting (...)tooltip is not a function with Jquery

Question

I am trying to incorporate Jquery inside my Angular 8 project using

var $ = require('jquery');

However when I call this method

$(MyControl).tooltip({'title': data.text, html:true});

I get a TypeError: $(...).tooltip is not a function

My angular.json scripts section looks exactly like this so jquery is declared before the other two

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"             
            ],

What is causing this error?

UPDATE Ok this is just wierd So putting these js files under the styles header in my angular.json it works

 "styles": [                       
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/styles.css"
            ],

Placing them under the scripts section it doesnt work, removing them completely from the angular.json and they dont work.

Only two places does it work and that is directly in the index.html as CDN or in the styles section.

Is there any rhyme or reason on why this works under styles and not scripts?

Try with this: ($(MyControl) as any).tooltip({'title': data.text, html:true}); — robert
– robert, Commented Apr 6, 2020 at 19:32
Tried that. I also did a console.log($(y)) and I dont even see tooltip as part of the control. I see mouse over, mousehover etc but nothing that says tooltip — Terrance Jackson
– Terrance Jackson, Commented Apr 6, 2020 at 19:42
@robert So this is wierd. this works when placing those js files under the styles section of angular.json — Terrance Jackson
– Terrance Jackson, Commented Apr 6, 2020 at 23:23

amanpurohit · Accepted Answer · 2020-04-06 19:35:57Z

2

Declare a variable called jQuery or $ in the angular component where you want to use jQuery plugin.

declare var $: any;

OR

declare var jQuery: any;

The declare keyword is used for ambient declarations where you want to define a variable that may not have originated from a TypeScript file.

answered Apr 6, 2020 at 19:35

amanpurohit

1,29611 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terrance Jackson Over a year ago

So this works console.log(jQuery version: ${$.fn.jquery}); However this still throws and error $(mycontrol).tooltip()

Terrance Jackson Over a year ago

This is wierd that it only works when placing the js files under the styles section of my angular.json

Collectives™ on Stack Overflow

Angular getting (...)tooltip is not a function with Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related