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.

Answer 1

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.