jQuery tooltip with link inside

I have a grid of large images for products. I'm looking to have a tooltip appear when you rollover the image. Though the tooltip will need to stay visible because there will be content and links inside of it. The tooltip will be positioned partly on top of its respective large product image. How do I determine to hide the tooltip when the user is not over the tooltip and the product image and show the tooltip when the user is over the tooltip and image?

Is there a jQuery plugin that hand开发者_运维技巧les this already?

Any help is appreciated! Thanks!

Hey I had an issue like this once. Though not exactly what you need this is what I ended up using.

var over_picker = false; //var to store state of over or not over

$('.list_picker').live('mouseover mouseout', function(event){ 
if (event.type == 'mouseover') {
    over_picker=true;
    console.log('inside');
}else{ 
    over_picker=false; 
    console.log('outside');
}
});
$('body').live('click', function(){ 
if(! over_picker) $('.list_picker').hide();
});

I hope this can be of some help.

As already suggested in another thread, the native design of the tooltip rely on different assumptions, so the behaviour you need (a sticky tooltip that allows the user to click its content) is not officially supported.

Anyway looking at this link you can see it's possibile to achieve what you need using jQuery Tools:

http://jquerytools.org/demos/tooltip/any-html.html

Here is a standalone demo

http://jquerytools.org/demos/tooltip/any-html.htm