Image tool tip in overflow:auto div


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 Look under the Product Code column.

Many Thanks

Hi, I don’t believe this to be possible at the moment, considering your HTML.

I don’t know how your JS works, but could you make the image hover element follow the mouse no matter where teh actual <div> hover thingy is?

Like, you have a <div><img></div> to have that be the hovered image, could that HTML be placed anywehre assuming the JS is modified accordingly?

Glad you found an alternative (and of course, thank you for actually posting your fix, it will help many people who are searching for answers to their own problem :))


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: