Это плагин всплывающей подсказки с возможностью выбора стороны "выскакивания" всплывающей подсказки: сверху, справа, снизу, слева. Выглядит очень красиво и совершенно не нагружает сайт.
Перейдём к установке нашей кнопки:
1. Открываем ПУ (Панель управления) -> Дизайн -> Управление Дизайном -> Нижняя часть сайта и вставляем туда следующие скрипты:
Код
<script type="text/javascript" src="http://updatesite.ru/js/jquery.tipsy.js"></script>
<script type='text/javascript'>
$(function() {
$('.north').tipsy({gravity: 'n'});
$('.south').tipsy({gravity: 's'});
$('.east').tipsy({gravity: 'e'});
$('.west').tipsy({gravity: 'w'});
});
</script>
2. Открываем ПУ (Панель управления) -> Дизайн -> Управление Дизайном -> Таблица стилей CSS и добавляем следующее:
Код
.tipsy {
padding: 5px;
font-size: 11px;
opacity: 0.8;
filter: alpha(opacity=80);
background-repeat: no-repeat;
background-image: url('http://updatesite.ru/tipsy.gif');
}
.tipsy-inner {
padding: 5px 8px 4px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
}
.tipsy-inner {
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.tipsy-north {
background-position: top center;
}
.tipsy-south {
background-position: bottom center;
}
.tipsy-east {
background-position: right center;
}
.tipsy-west {
background-position: left center;
}
3. Установка на этом закончена. Теперь просто необходимо добавить к ссылке соответственный класс:
Код
<a class='east' href='http://updatesite.ru' title='Подсказка появляется слева'>Подсказка слева</a>
<a class='north' href='http://updatesite.ru' title='Подсказка появляется снизу)'>Подсказка снизу</a>
<a class='south' href='http://updatesite.ru' title='Подсказка появляется сверху'>Подсказка сверху</a>
<a class='west' href='http://updatesite.ru' title='Подсказка появляется справа'>Подсказка справа</a>
){kind=link}