image tool tip in overflow:auto div

Hi

I have a list of products in a div styled with overflow:auto. I also have the image of the product appear in a tooltip that sits within the same div.

All is well but when you get to the bottom of the list the image tooltip is hidden within the scroll box.

I tried applying the z-index property to it so it can overlap it but no joy.

Any ideas what can be done to fix it?

The link is here to the site (http://www.vision-products.co.uk/subcategories2.asp?categoryid=2) Look under the Product Code column.


Many Thanks

can you change the position of the tooltips manually? that would be the easiest/quickest option.

my knowledge of z-index is pretty poor but i do know that you need to position the element before it'll work, there's a pretty good write up @ smashing magazine (http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/). may be of some use.

One of these may address your problem or give you an idea how to fix it. These are JavaScript Tooltips:

http://ashishware.com/Tooltip.shtml
http://www.dhtmlgoodies.com/scripts/bubble-tooltip/bubble-tooltip.html
http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
http://willcode4beer.com/tips.jsp?set=bubbleTooltips
http://www.javascriptkit.com/script/script2/tooltip.shtml
http://www.walterzorn.com/tooltip/extensions.htm
http://www.freejavascriptkit.com/free_javascripts/tooltip_hint/dhtml_mouseover_tooltip.html
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
http://boxover.swazz.org/


HTHs,

Hi Everyone

Thanks for your help. I decided to go with another example and it does what i need it to do.

Here is the link should anyone need it:

tooltip (http://www.xinod.it/scripts/tooltip_gallery/)

Thanks again guys for your help, really appreciate it

Nice. May play with those. Might load the images faster on mouseovers if you use an image pre-loader. Will try that when I get time.