jQuery всплывающие подсказки, с помощью плагина TipTip

Здравствуйте, уважаемые читатели XoZbloga! Если Вам надоели стандартные всплывающие подсказки, то эта статья для Вас! Плагин, который мы рассмотрим называется TipTip, чтобы скачать перейдите по следующей ссылке. C его помощью можно взять под контроль всплывающие подсказки на сайте и настроить их на свой вкус. У этого легковесного плагина (размер 7кб) также есть несколько параметров, спасибо АВТОРУ. Для его работы необходима библиотека jQuery, стили для подсказки ну и сам скрипт.

Подключение плагина

Для начала следует подключить все необходимое для работы плагина.

<!-- библиотека jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- непосредственно сам скрипт плагина -->
<script type="text/javascript" src="jquery.tipTip.js"></script>

А также стили CSS, для оформления подсказки. Стили достаточно простые, так что можно смело настроить их по вкусу.

<link href="tipTip.css" rel="stylesheet" type="text/css">

Всплывающие подсказки построены на блоках DIV. И имеют следующую структуру:

<div id="tiptip_holder">
    <div id="tiptip_content">
        <div id="tiptip_arrow">
            <div id="tiptip_arrow_inner"></div>
        </div>
    </div>
</div>

Использование

Использовать сие творение, просто. Допустим мы хотим добавить всплывающую подсказку для ссылки. Нужно указать класс или идентификатор:

Далеко-далеко за <a href="#" class="tip" title="Это всплывающая подсказка!">словесными
горами</a> в стране гласных и согласных.
<img src="image.jpg" class="tip" title="А это картинка!">

Теперь нужно добавить следующих код:

<script type="text/javascript">
$(document).ready(function() {
   $(".tip").tipTip({maxWidth: "auto", defaultPosition: "top"});
});
</script>

C помощью jQuery селектора выбираем все элементы с классом (.top) и вызываем метод tipTip с параметрами (maxWidth и defaultPosition).

Классы можно комбинировать:

$(".tip, .tip2").tipTip();

Параметры

  • activation: строка («hover» по-умолчанию) — при каком событии появляется подсказка. Доступны: «hover», «focus» и «click»;
  • keepAlive: true или false (false по-умолчанию) — если установить true тогда подсказка не исчезнет пока на нее не наведут курсор;
  • maxWidth: строка («200px» по-умолчанию) — максимальная ширина подсказки, этот параметр может принимать значение «auto»;
  • edgeOffset: число (3 по-умолчанию) — расстояние в пикселях от ссылки до подсказки;
  • defaultPosition: строка («bottom» по-умолчанию) — положение подсказки относительно ссылки. Доступны: «top», «bottom», «left» и «right»;
  • delay: число (400 по-умолчанию) — количество миллисекунд задержки перед показом подсказки;
  • fadeIn: число (200 по-умолчанию) — скорость появления подсказки в миллисекундах;
  • fadeOut: число (200 по-умолчанию) — скорость исчезновения подсказки в миллисекундах;
  • attribute: строка («title» по-умолчанию) — атрибут HTML, содержимое которого отобразится в подсказке;
  • content: true или false (false по-умолчанию) — HTML или текст будет выбран в качестве контента для подсказки;
  • enter: функция обратного вызова — пользовательская функция, которая выполняется всякий раз при наведении курсора мыши на ссылку.
  • exit: функция обратного вызова — пользовательская функция, которая выполняется всякий раз, когда убирается курсор от ссылки.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

  • Сергей

    Спасибо Вам за такой замечательный сайт! 

  • Роман Тимохов

    А как сделать чтобы вместо тексат в подсказке была картинка???

    • можно сделать отдельный атрибут для того элемента, при наводке на который должна появляться картинка и вставить тег … или вставить тег прямо в атрибут title.

      вот пример:

      < a href="#" class="tip" title="Hello World!»>словесными горами

      скрипт:

      $(«.tip»).tipTip({content:false});

      все просто. можно и совсем без параметра так как для content значение false по-умолчанию