Недавно мы опубликовали урок, в котором рассказывали, как создать подсказки на jQuery при помощи плагина Easy Tooltip. А в этом уроке мы рассмотрим еще один вид подсказок на основе этого же плагина.
Шаг 1.
Подключим фреймворк jQuery и плагин Easy Tooltip 1.0 к нашему документу, прописав следующий код между тегами <head>:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tooltip.js"></script>
Шаг 2.
Далее пропишем следующий скрипт:
<script type="text/javascript">
$(document).ready(function(){
$("a").easyTooltip();
});
</script>
Шаг 3.
В отдельный CSS-файл или между тегами <head> пропишем стиль, отвечающие за внешний вид посказок:
#easyTooltip{
padding:5px 10px;
border:1px solid #195fa4;
background:#195fa4 url(bg.gif) repeat-x;
color:#fff;
}
Если вы перенесете фоновую картинку bg.gif в другую папку, то не забудьте в стиле изменить путь к ней. Можете изменить этой картинке цвет в фотошопе, чтобы идеально подогнать ее под дизайн Вашего сайта.
Шаг 4.
В том месте, где мы хотим сделать подсказку для ссылки, необходимо прописать ей атрибут title. Например так:
Наведите мышкой <a href="http://site.com" title="Перейти на сайт site.com">сюда</a>
Готово! С помощью нескольких строк кода мы создали красивые, стильные подсказки.