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>
Вы не можете скачивать файлы с нашего сервера
смайлы угар :)