Tipsy Tooltip箭头故障

Question

我正在用tipsy工具提示制作一个工具栏。我改变了CSS以改变颜色，然后我为箭头做了一个图像。这里有一个图像的链接：http://www.novaprogramming.com/tipsy.png颜色是：#454545，由于某种原因，它不会显示？

Answer 1

因为箭头图像是一个图像，所以sprite...you需要指定背景位置属性。检查http://jsfiddle.net/hwsns/2/中的tis。注意我添加的css

Answer 2

您的箭头存储在css精灵中，这意味着您需要正确设置背景位置，以便显示箭头。精灵中有4个箭头:北、东、南和西，每个箭头都位于相应边缘的中心。对于这些箭头，您当前的css假设箭头始终位于一个角上，但事实并非如此。要显示箭头，您必须像这样更正这些属性：

.tipsy-n .tipsy-arrow {
    background-position: center top;
    left: 50%;
    margin-left: -4px;
    top: 0;
}
.tipsy-s .tipsy-arrow {
    background-position: center bottom;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-e .tipsy-arrow {
    background-position: right center;
    height: 9px;
    margin-top: -4px;
    right: 0;
    top: 50%;
    width: 5px;
}
.tipsy-w .tipsy-arrow {
    background-position: left center;
    height: 9px;
    left: 0;
    margin-top: -4px;
    top: 50%;
    width: 5px;
}

背景位置的第一个值指定图像的水平位置，第二个值指定图像的垂直位置。您还可以使用百分比值而不是关键字，如下所示：

.tipsy-n .tipsy-arrow {
    background-position: 50% 0;
    left: 50%;
    margin-left: -4px;
    top: 0;
}
.tipsy-s .tipsy-arrow {
    background-position: 50% 100%;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-e .tipsy-arrow {
    background-position: 100% 50%;
    height: 9px;
    margin-top: -4px;
    right: 0;
    top: 50%;
    width: 5px;
}
.tipsy-w .tipsy-arrow {
    background-position: 0 50%;
    height: 9px;
    left: 0;
    margin-top: -4px;
    top: 50%;
    width: 5px;
}