Tipsy Tooltip arrow problem

Question

Я делаю панель инструментов с подвыпившимся наконечником. Я изменил CSS, чтобы изменить цвет, затем я сделал изображение для стрелки. вот ссылка на изображение: http://www.novaprogramming.com/tipsy.png цвет: # 454545 По какой-то причине он не появится?

Answer 1

Поскольку изображение стрелки - это спрайт изображения ... вам нужно указать свойство background-position. Проверьте tis out 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; 
}