Better Tooltip

Jon Cazier на днях написал очень симпатичный плагин к JQuery, предназначением которого является произведение благоприятного впечатления на неискушенных пользователей посредством всяческих всплываний и постепенных проявлений текста. Конечно, в данное время ассортимент подобных плагинов достаточно обширен, но к этому творению, все-таки, предлагаю приглядеться повнимательнее.

Первый приятный момент – вес скрипта. В плагине всего 2,2 Кб и это не может не радовать.

Вторая приятность – авторское оформление всплывающей подсказки выглядит вполне прилично, так что – можно просто брать и использовать (что иногда бывает просто необходимо).

Ну и последнее – чистенький код плагина. Мелочь, а приятно ).

«Базовая комплектация» плагина представляет собой следующие файлы:

      jquery.betterTooltip.js – сам плагин
      style.css – файл стилей
      png-изображения в количестве 3-х (трёх) штук.

Естественно, еще нам понадобиться двигатель всего этого благолепия – JQuery, последнюю версию которого вы можете скачать на офсайте.

Теперь посмотрим, как, собственно, заставить эту штуку работать.

1. Подключаем стили

1
<link href="theme/style.css" rel="stylesheet" type="text/css" media="all" />

2. Подключаем JQuery

1
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>

3. Подцепляем плагин

1
<script src="js/jquery.betterTooltip.js" type="text/javascript"></script>

4. Инициализируем плагин

1
2
3
4
5
     <script type="text/javascript">
        $(document).ready(function(){
            $('.tTip').betterTooltip({speed: 150, delay: 300});
        });
</script>

В

1
$('.tTip')

указываем class или id элемента (элементов), title которого будет обработан плагином. Соответственно, таким элементом может являться все, что имеет title.

Например, это может быть:

1
<a class="tTip" title="Текст всплывающей подсказки" href="#">Ссылочка</a>

или вот:

1
<div class="tTip"   title="Текст всплывающей подсказки">Текст, по наведению на который будет появляться подсказка</div>

Как мы видим, у плагина даже есть пара настроек:

1
$('.tTip').betterTooltip({speed: 150, delay: 300});
  • Параметр `speed` – время, в течении которого появляется подсказка. Чем больше значение этого параметра, тем МЕНЬШЕ скорость появления.
  • Параметр `delay` – задержка появления подсказки. Чем больше параметр – тем больше времени будет проходить между наведением курсора на элемент и появлением подсказки

Все это в действии можно посмотреть вот здесь.

А здесь архив с демонстрационными материалами.
У меня пока все, удачных экспериментов!