Tipsyツールチップの問題

Question

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

Answer 1

矢印イメージはイメージスプライトなので、背景位置プロパティを指定する必要があります。チェックアウトは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; 
} 

背景位置の最初の値は水平位置と第二値画像の垂直方向の位置を特定します。

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