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

Question

I have several images which have a Tooltip on hover ( which display another image)

The thing looks like this

https://i.sstatic.net/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. */
}