CODEWITHSUNDEEP
javascriptjquerycss
wwwuser
wwwuser

Reputation: 6372

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 handles this already?

Any help is appreciated! Thanks!

Upvotes: 2

Views: 3968

Answers (2)

NinjaCross
NinjaCross

Reputation: 843

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

Upvotes: 0

dibs
dibs

Reputation: 1077

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.

Upvotes: 2

Related Questions