Tipsy Tooltip arrow Проблема - PullRequest
Новая
       10

Tipsy Tooltip arrow Проблема

0 голосов
/ 11 марта 2012

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

Ответы [ 2 ]

1 голос
/ 11 марта 2012

Ваши стрелки хранятся в спрайте 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 указывает горизонтальную позицию, а второе - вертикальную позицию изображения.Вы также можете использовать процентные значения вместо ключевых слов, которые выглядят так: 

.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;
}
1 голос
/ 11 марта 2012

Так как изображение стрелки является спрайтом изображения ... вам нужно указать свойство background-position. Проверьте это http://jsfiddle.net/hwsns/2/. Обратите внимание, что я добавил CSS

...