Dynamic Positioning tooltip not working.

Dynamic Positioning tooltip not working.

Hi All, 

I am studying the jQuery dynamic positioning tooltip tutorial ( standalone verison : http://flowplayer.org/tools/demos/tooltip/index.htm). The tutorial utilizes jQuery's dynamic positioning tooltip. 

Basically I have done everything the tutorial states to do but when i roll over my icons the tooltip is not displaying. Any tips and suggestions are welcome and very appreciated.

Here is my html:

[html] 

div id="demotip">&nbsp;</div>
<div id="demo">
<a href="#"><img src="assets/web/image_sm.png" title="This is my first image"/></a>

[/html]

my CSS:

[css]

#demotip.bottom { 
display:none;
background:transparent url(../assets/black_arrow_big.png);
font-size:12px;
height:216px;
width:370px;
padding:25px;
color:#fff; }

#demo img{ border:0; cursor:pointer;}

[/css]

my javascript:
[ js]

$(document).ready(function() { $("#demo img[title]").tooltip('#demotip'); });

[/js]