CODEWITHSUNDEEP
jquery-uijquery
Sithelo Ngwenya
Sithelo Ngwenya

Reputation: 501

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

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.

Upvotes: 10

Views: 59814

Answers (6)

HoldOffHunger
HoldOffHunger

Reputation: 20946

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).

Upvotes: 0

Yogesh
Yogesh

Reputation: 725

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

Upvotes: 1

Muhammad
Muhammad

Reputation: 7344

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>

Upvotes: 0

Karthikeyan Vellingiri
Karthikeyan Vellingiri

Reputation: 1330

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.

Upvotes: 0

AkshayK
AkshayK

Reputation: 315

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

< jdoc:include type="head" />

Hope it works for you too.

Upvotes: 3

Mister Epic
Mister Epic

Reputation: 16743

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

Upvotes: 19

Related Questions