Question

I am using jquery tools tooltips on an image. It’s a basic use of the tooltip, when somebody rolls over the image, the background image dims and the tooltip pops up and says “click for details”, and this works fine up to this point. I would like to actually have the tooltip be clickable so that it will open an overlay window with the details of the image. I’m not sure how to go about doing that? The html content is just a div with an .albumImage class and img src, pretty much straight out of the guide. My script is as follows…

$(".albumImage img[title]").tooltip({

    position: 'top center',
    offset: [80,0],

    onShow: function() {
    this.getTrigger().fadeTo("0", 0.3);
    },
    onHide: function() {
    this.getTrigger().fadeTo("0", 1.0);
    }

}); 

Answer 1

Simply add the click handler before setting up the tooltip:

$(".albumImage img[title]").click(function(){
    alert('Hello!');
});


$(".albumImage img[title]").tooltip({
    position: 'top center',
    offset: [80,0],
    onShow: function() {
        this.getTrigger().fadeTo("0", 0.3);
    },
    onHide: function() {
        this.getTrigger().fadeTo("0", 1.0);
    }
});