Please refer here. I would like to have the image preview/tooltip sit in the same position no matter what image thumbnail I roll over, I cant manage to get this to work. I have managed to set it with inline CSS to an absolute position but then depending on what thumbnail I hover over it still changes that position.
Here is my jsfiddle:
http://jsfiddle.net/FsPSZ/
If anyone can explain how I can get the preview image to stay in one determined postion for ALL 3 that would be great.
EDIT: Thanks to tuff for posting excatly what I am after HERE: http://jsbin.com/ogutiv/1/edit question is, how can I have this animate in? I attempted with CSS3 and Opacity transition but could not manage to get it to work. Thanks.
OK, I’m not sure if you mean that the tooltips’ positions should be fixed relative to their respective thumbnails, or that all tooltips should appear in a single fixed position.
In either case, you can do it with no JS, since all of your JS is for calculating position relative to the cursor, which you say you don’t want.
Here’s a demo showing tooltips in fixed position relative to their thumbnails: http://jsbin.com/ogutiv/2/edit
Here’s a demo showing tooltips in a single fixed position relative to the container of all the thumbnails: http://jsbin.com/ogutiv/1/edit