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

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:

开发者_Python百科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.

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.

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!

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.