javascript - Tipsy Tooltip 箭头问题

Question

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

Answer 1

由于箭头图像是图像精灵...您需要指定背景位置属性。检查 tis 出http://jsfiddle.net/hwsns/2/。注意我添加的css

Answer 2

您的箭头存储在 css sprite 中，这意味着您需要正确设置背景位置才能显示箭头。您的精灵中有 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;
}

background-position 的第一个值指定图像的水平位置，第二个值指定图像的垂直位置。您还可以使用百分比值代替关键字，如下所示：

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