Adding click event to tooltip

Adding click event to tooltip

Hello,

I'm using the jquery tools tooltip plugin. I've tried to add the click event as per the event management documentation but I'm having trouble getting it to work correctly. Can anyone help? Here is the code I'm using: (I backed out my changes)


<style>
#dynatip { display:none; background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png); font-size:12px; height:70px; width:160px; padding:25px; color:#fff; }
/* style the trigger elements */
#dyna img { border:0; cursor:pointer; margin:0 8px; }
</style>
<!-- use gif image for IE -->
<!--[if lt IE 7]>
<style>
#dynatip {
    background-image:url(http://flowplayer.org/tools/img/tooltip/black_arrow.gif);
}
</style>
<![endif]-->
<!-- the tooltip -->
<div id="dynatip"> </div>
<!-- a couple of trigger elements -->
<div id="dyna"> <img src="http://static.flowplayer.org/tools/img/photos/1.jpg"
        title="A must have tool for designing better layouts and more intuitive user-interfaces."/> <img src="http://static.flowplayer.org/tools/img/photos/2.jpg"
        title="Tooltips can be positioned anywhere relative to the trigger element."/> <img src="http://static.flowplayer.org/tools/img/photos/3.jpg"
        title="Tooltips can contain any HTML such as links, images, forms, tables, etc."/> <img src="http://static.flowplayer.org/tools/img/photos/4.jpg" style="margin-right:0px"
        title="There are many built-in show/hide effects and you can also make your own."/> </div>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
 
$(document).ready(function() {
 
    // initialize tooltip
    $("#dyna img[title]").tooltip({
    
        // use single tooltip element for all tips
        tip: '#dynatip', 
        
        // tweak the position
        offset: [10, 2],
        
        // use "slide" effect
        effect: 'slide'
        
    // add dynamic plugin 
    }).dynamic( {
    
        // customized configuration on bottom edge
        bottom: {
        
            // slide downwards
            direction: 'down',
            
            // bounce back when closed
            bounce: true
        }
    });
    
});
</script>
<style>
 
/* override the arrow image of the tooltip */
#dynatip.bottom {
    background:url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);    
    padding-top:40px;
    height:55px;
}
 
#dynatip.bottom {
    background:url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
}
</style>
<!-- use gif image for IE -->
<!--[if lt IE 7]>
<style>
#dynatip {
    background-image:url(http://flowplayer.org/tools/img/tooltip/black_arrow.gif);
}
 
#dynatip.bottom {
    background:url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.gif);
}
</style> >