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

Если Вам надоели стандартные всплывающие подсказки, то эта статья для Вас! Плагин, который мы рассмотрим называется TipTip, чтобы скачать перейдите по следующей ссылке.

Если Вам надоели стандартные всплывающие подсказки, то эта статья для Вас! Плагин, который мы рассмотрим называется 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"><br>

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

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

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

Нужно указать класс или идентификатор:

Где-то за <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><br>

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

Скачать исходники Tip Tip с примером

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

$(".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: функция обратного вызова — пользовательская функция, которая выполняется всякий раз, когда убирается курсор от ссылки.

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

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

Рекомендуем

Теги

Смотрите также