javascript - ほろ酔いツールチップの矢印のトラブル

Question

ほろ酔いツールチップでツールバーを作っています。CSSを変更して色を変更し、矢印の画像を作成しました。ここに画像へのリンクがあります: http://www.novaprogramming.com/tipsy.png 色は: #454545 何らかの理由で表示されませんか?

Answer 1

矢印画像は画像スプライトなので...background-positionプロパティを指定する必要があります。http://jsfiddle.net/hwsns/2/をチェックしてください。私が追加した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;
}

background-position の最初の値は画像の水平位置を指定し、2 番目の値は画像の垂直位置を指定します。次のように、キーワードの代わりにパーセント値を使用することもできます。

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