trying to use jquery tooltip plugin, object has no method "tooltip"

Question

I'm using this tooltip: http://flowplayer.org/tools/demos/tooltip/index.html

I have the following lines in my html file:

<script src="/javascripts/home.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>

<div id="boo">
<img src="image1.jpg" title="this thing is a tool"/>
<img src="image2.jpg" title="this thing is also tool"/>
</div>

I have the following line in my home.js file:

$("#boo img[title]").tooltip();

I have the following line in my css file:

.tooltip {
    display:none;
    background:transparent url(/tools/img/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff; 
}

I get this error:

Uncaught TypeError: Object [object Object] has no method 'tooltip'

I'm at my wits end. I feel like I've followed the example on the site exactly, but no idea what's going on.

Gregg B · Accepted Answer · 2012-06-07 20:50:19Z

11

You should reorder your js files:

<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script src="/javascripts/home.js" type="text/javascript"></script>

A little more explanation for anyone else having this problem:

Scripts are loaded in the order they're called, so you want to load jQuery first, then any plugins, then your custom code.

edited Jun 7, 2012 at 20:50

answered Sep 30, 2011 at 1:11

Gregg B

13.9k6 gold badges36 silver badges52 bronze badges

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

Comments

user1585121 · Accepted Answer · 2012-08-16 08:12:16Z

3

Got this problem too, and it was because of an old version of jquery lost in the sources folder, was jquery v1.6.2. If it can help someone... Have a nice day!

answered Aug 16, 2012 at 8:12

user1585121

1 Comment

Cody Over a year ago

I pulled that one in and took out jquery cdn, pull cdn and delete ./jquery.min.js -- no luck.

Chris Cherry · Accepted Answer · 2011-09-30 01:06:49Z

1

Wrap $("#boo img[title]").tooltip(); in $(function(){ }); so you end up with:

$(function(){
    $("#boo img[title]").tooltip();
});

Why:

The $(function()... is a short cut to execute that code on the domReady event. So at that point all of the jquery files, and the page, will be loaded far enough for your javascript to work.

answered Sep 30, 2011 at 1:06

Chris Cherry

28.6k6 gold badges73 silver badges72 bronze badges

1 Comment

Cody Over a year ago

I had jQuery(function($){... and switched to $(function(){..., but still no luck.

Collectives™ on Stack Overflow

trying to use jquery tooltip plugin, object has no method "tooltip"

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related