Better Tooltip. Всрлывающие подсказки на jQuery
Jon Cazier на днях написал очень симпатичный плагин к JQuery, предназначением которого является произведение благоприятного впечатления на неискушенных пользователей посредством всяческих всплываний и постепенных проявлений текста.
Конечно, в данное время ассортимент подобных плагинов достаточно обширен, но к этому творению, все-таки, предлагаю приглядеться повнимательнее.
Первый приятный момент – вес скрипта. В плагине всего 2,2 Кб и это не может не радовать.
Вторая приятность – авторское оформление всплывающей подсказки выглядит вполне прилично, так что – можно просто брать и использовать (что иногда бывает просто необходимо).
Ну и последнее – чистенький код плагина. Мелочь, а приятно ).
«Базовая комплектация» плагина представляет собой следующие файлы:
- jquery.betterTooltip.js – сам плагин
- style.css – файл стилей
- png-изображения в количестве 3-х (трёх) штук.
Естественно, еще нам понадобиться двигатель всего этого благолепия – JQuery, последнюю версию которого вы можете скачать на офсайте.
Теперь посмотрим, как, собственно, заставить эту штуку работать.
1. Подключаем стили
<link href="theme/style.css" rel="stylesheet" type="text/css" media="all" />
2. Подключаем JQuery
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
3. Подцепляем плагин
<script src="js/jquery.betterTooltip.js" type="text/javascript"></script>
4. Инициализируем плагин
<script type="text/javascript"> $(document).ready(function(){ $('.tTip').betterTooltip({speed: 150, delay: 300}); }); </script>
В $(‘.tTip’)
указываем class или id элемента (элементов), title которого будет обработан плагином. Соответственно, таким элементом может являться все, что имеет title.
Например, это может быть:
<a class="tTip" title="Текст всплывающей подсказки" href="#">Ссылочка</a>
или вот:
<div class="tTip" title="Текст всплывающей подсказки">Текст, по наведению на который будет появляться подсказка</div>
Как мы видим, у плагина даже есть пара настроек:
$('.tTip').betterTooltip({speed: 150, delay: 300})
- Параметр `speed` – время, в течении которого появляется подсказка. Чем больше значение этого параметра, тем МЕНЬШЕ скорость появления.
- Параметр `delay` – задержка появления подсказки. Чем больше параметр – тем больше времени будет проходить между наведением курсора на элемент и появлением подсказки
У меня пока все, удачных экспериментов!