html - 定位工具提示不相对于 "origin"[css]

Question

我有几个图像在悬停时有一个工具提示(显示另一个图像)

事情是这样的

http://i.stack.imgur.com/PjywK.jpg

现在我的问题是，每次我将鼠标悬停在一张图片上时，它都会将工具提示锁定到图片上。因此，每次我将鼠标悬停在不同的图像上时，工具提示都会处于不同的位置。我的 CSS 看起来像这样:

.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;
}

好吧，我想为每个工具提示找到一个固定位置，这样，当我将鼠标悬停在不同的图像上时，工具提示会出现在同一个位置。

感谢您的帮助:)

澄清一下: http://jsfiddle.net/auNVb/

Answer 1

hoveredposition需要改为fixed，添加一个left/right位置50%和一个变量top 位置如下:

.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. */
}