Здравствуйте, уважаемые читатели XoZbloga! Если Вам надоели стандартные всплывающие подсказки, то эта статья для Вас! Плагин, который мы рассмотрим называется TipTip, чтобы скачать перейдите по следующей ссылке. C его помощью можно взять под контроль всплывающие подсказки на сайте и настроить их на свой вкус. У этого легковесного плагина (размер 7кб) также есть несколько параметров, спасибо АВТОРУ. Для его работы необходима библиотека jQuery, стили для подсказки ну и сам скрипт.
Подключение плагина
Для начала следует подключить все необходимое для работы плагина.
1 2 3 4 | <!-- библиотека 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, для оформления подсказки. Стили достаточно простые, так что можно смело настроить их по вкусу.
1 | <link href="tipTip.css" rel="stylesheet" type="text/css"> |
Всплывающие подсказки построены на блоках DIV. И имеют следующую структуру:
1 2 3 4 5 6 7 | <div id="tiptip_holder"> <div id="tiptip_content"> <div id="tiptip_arrow"> <div id="tiptip_arrow_inner"></div> </div> </div> </div> |
Использование
Использовать сие творение, просто. Допустим мы хотим добавить всплывающую подсказку для ссылки. Нужно указать класс или идентификатор:
1 2 3 | Далеко-далеко за <a href="#" class="tip" title="Это всплывающая подсказка!">словесными горами</a> в стране гласных и согласных. <img src="image.jpg" class="tip" title="А это картинка!"> |
Теперь нужно добавить следующих код:
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function() { $(".tip").tipTip({maxWidth: "auto", defaultPosition: "top"}); }); </script> |
C помощью jQuery селектора выбираем все элементы с классом (.top) и вызываем метод tipTip с параметрами (maxWidth и defaultPosition).
Классы можно комбинировать:
1 | $(".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+. Спасибо!
Источник статьи/урока: https://xozblog.ru