+

GetTip - настраиваемые всплывающие подсказки для uCoz

GetTip - настраиваемые всплывающие подсказки для uCoz
Цена: БЕСПЛАТНО
Просмотров: 258
Добавлено: 16.03.2017
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: ОТСУТСТВУЕТ
Демо: Смотреть
Информация о материале
GetTip - простой jQuery плагин для создания всплывающих подсказок из атрибута title любого элемента. Плагин довольно простой и имеет небольшой размер, однако обладает всеми необходимыми опциями, такими как например: изменение позиции подсказок, задержки появления, плавности, и события для срабатывания.

Особенности:
• Отображение при наведении, нажатии или фокусировке.
• Параметры могут быть заданы через атрибут data-tooltip.
• Автоматическое отключение после тайм-аута.
• Пользовательский переход на входе / выходе.

Установка скрипта:

1. В нижней части сайта пропишите ссылки на скрипт, стили, и скрипт вызова:
Код
<script src="http://fullweb.ucoz.ru/SCRIPTS/GetTip/gettip.js"></script>
<link rel="stylesheet" href="http://fullweb.ucoz.ru/SCRIPTS/GetTip/gettip.css"/>
<script>
$(document).ready(function() {
$('[data-tooltip]').getTip({
  offset : 8, // Отступ (в пикс.)
  pos : 'top', // Позиция ("left", "top", "right", "bottom")
  on : 'hover', // Событие ("hover", "click", "focus")
  delay : 0, // Задержка (в мс.)
  duration : 200, // Плавность (в мс.)
});
});
</script>

В скрипте вызова, как видно, задаются и общие настройки для подсказок.
Все файлы, для надежности, лучше сохраните себе.

2. А вот так прописывается любой элемент, к которому вы хотите привязать подсказку. Рассмотрим на примере обычной ссылки:
Код
<a href="#" data-tooltip="" title="Текст подсказки">Ссылка</a>

То есть если вы хотите чтоб у всех элементов подсказки были одинакового типа, то просто в скрипте вызова задайте общие настройки, а к нужным элементам добавьте пустой атрибут data-tooltip. Но если для какого-то элемента нужны индивидуальные настройки, то в этом атрибуте, в фигурных скобках - можно указать для него параметры, по такому же типу как и в скрипте. Например:
Код
<a href="#" data-tooltip="{offset: 20,pos: 'bottom',on: 'click',delay: 228,duration: 30}" title="Необычная подсказка">Ссылка</a>


Теги: Tooltip, Подсказки
Комментарии (0)