Position a tooltip not relative to the "origin" [css] - html

Question

I have several images which have a Tooltip on hover ( which display another image)
The thing looks like this
http://i.stack.imgur.com/PjywK.jpg
Now my problem is that, everytime I hover over one image it locks the tooltip to the image. So the tooltip is in a different position everytime I hover over a different image. my css for this looks like this:
.playertooltip {
outline: none;
text-decoration: none;
position: relative;
}
.playertooltip span {
display: none;
position:absolute;
border: 5px solid white;
}
.playertooltip:hover span {
display: block;
position:absolute;
border: 5px solid white;
z-index: 99;
}
Well, I want to find a fixed position for EVERY tooltip so that, when I hover over different images the tooltip appears in the same place.
Thanks for the help :)
For clarifycation:
http://jsfiddle.net/auNVb/

Answer 1

The hovered position needs to be changed to fixed, add a left/right position of 50% and a variable top position like the following:
.playertooltip {
outline: none;
text-decoration: none;
position: relative;
}
.playertooltip span {
display: none;
position:absolute;
border: 5px solid white;
}
.playertooltip:hover span {
display: block;
position:fixed; /* Changed from absolute */
border: 5px solid white;
z-index: 99;
left: 50%; /* Move it to the "half" of the page */
top: 20%; /* Move it to the "half" of the page (from the top).
You have to experiment with this,
as I had variable results depending
on the elements present in the page. */
}