jQuery tooltip image preview not working

Question

Hey experts,

I have a simple image gallery that I've paginated, and I want to to use a hover effect on roll over like the one in use at istockphoto.com, for previewing the images without having to leave the page.

This jQuery tooltip plugin looks simple, straightforward, and well-written, so I implemented on my site. The plugin is here: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

However... it's not working at all. Can you all take a look and let me know what ridiculously dumb thing I've probably overlooked?

My development site: http://homewoodphoto.jhu.edu/gallery/20030101%5Ftest%5Fgallery/

Thanks!

Answer 1

The tooltip in your example development page apears! But it is out the window. It is created below your footer. There is something wrong with your CSS of the id preview and the top and right values. You can see that the scrollbar on the right moves a little bit when you move over an image!

Try to add

#preview {position:absolute;}

to your CSS.

Answer 2

Your missing the CSS for the tool tip

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }

Added this and it works on your site