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

Question

I have gridview that is populated by jquery. Below is part of my code thats giving the above error:

var codes = $(this).find("Code").text();

 $("td", row).eq(6).html($(this).find("oTotal").text());
            if ($(this).find("Stock").text() == 'Y') {

                $("td", row).eq(7).html('<a href="#"  class="tooltip" title="This is my divs tooltip message!" id="' + codes + '" style="text-decoration:none">Y</a>');

                 $('#' + codes).live('click', function () {
                    $('#' + codes).tooltip();

                });
            }
            else {
                $("td", row).eq(7).html($(this).find("Stock").text());
            }

I am getting an error on $('#'+ codes).tooltip(); I have jquery.ui/1.8.22 and jquery/1.8.3.

Are you certain that you included the tooltip component in your jquery UI loadout? — Mister Epic, Aug 16 '13 at 18:23
Yes I did. I used this CDN http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js — Sithelo Ngwenya, Aug 16 '13 at 18:25

score 19 · Accepted Answer · answered Aug 16 '13 at 18:37

19

I think tooltip wasn't part of the file you are pulling in. Are you able to update your CDN reference to jQuery UI to:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

answered Aug 16 '13 at 18:37

Mister Epic

16,295
13
76
147

score 3 · Answer 2 · edited Apr 09 '15 at 14:36

3

I solved this problem by moving all my Javascript tags above:

< jdoc:include type="head" />

Hope it works for you too.

edited Apr 09 '15 at 14:36

Rafa Viotti

9,998
4
42
62

answered Apr 09 '15 at 14:21

AkshayK

305
3
4

score 1 · Answer 3 · answered Jan 18 '21 at 14:23

1

Try re-arranging your script includes so jQuery is first, jQuery UI is second, then along through the rest.

answered Jan 18 '21 at 14:23

Yogesh

715
1
7
20

score 0 · Answer 4 · edited Dec 20 '17 at 10:19

0

tooltip() is not a function!!!

I solved the problem by using below steps in angular 4.

install jquery using, npm install jquery command.

add the following code in the path src/typings.d.ts file.

declare var jquery:any;

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

It solved the tooltip() issue.

edited Dec 20 '17 at 10:19

Dmitriy

5,525
12
25
38

answered Dec 20 '17 at 09:58

Karthikeyan Vellingiri

1,270
1
17
26

score 0 · Answer 5 · answered May 18 '18 at 05:21

The tooltip is the part of Bootstrap so including bootstrap should solve the problem.

Quick links to check with bootstrap, you may remove https: from the beginning of the bootstrap links.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

score 0 · Answer 6 · answered Jan 21 '21 at 18:37

tooltip() has not always existed in jQuery UI. It was added in version 1.9, so it'll work in any version after 1.9. Proof:

version added: 1.9 (Source: API.jQueryUI.com: Tooltip Widget.)

If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().

This is why the accepted answer works: it simply links to version 1.10.3. Ideally, you should be using the most modern version of jQuery UI available (in fact, this rule applies typically to all packages).

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

6 Answers6

Linked

Related