Плагин довольно простой и имеет небольшой размер, однако обладает всеми необходимыми опциями, такими как например: изменение позиции подсказок, задержки появления, плавности, и события для срабатывания.
Особенности:
• Отображение при наведении, нажатии или фокусировке.
• Параметры могут быть заданы через атрибут data-tooltip.
• Автоматическое отключение после тайм-аута.
• Пользовательский переход на входе / выходе.
Установка :
1. Загружаем файл gettip.css в папку css а gettip.js в папку .js
2. В нижней части сайта пропишите ссылки на скрипт, стили, и скрипт вызова:
В скрипте вызова, как видно, задаются и общие настройки для подсказок.
Все файлы, для надежности, лучше сохраните себе.
3. В скрипте вызова, как видно, задаются и общие настройки для подсказок.
То есть если вы хотите чтоб у всех элементов подсказки были одинакового типа, то просто в скрипте вызова задайте общие настройки, а к нужным элементам добавьте пустой атрибут data-tooltip. Но если для какого-то элемента нужны индивидуальные настройки, то в этом атрибуте, в фигурных скобках - можно указать для него параметры, по такому же типу как и в скрипте. Например:
Особенности:
• Отображение при наведении, нажатии или фокусировке.
• Параметры могут быть заданы через атрибут data-tooltip.
• Автоматическое отключение после тайм-аута.
• Пользовательский переход на входе / выходе.
Установка :
1. Загружаем файл gettip.css в папку css а gettip.js в папку .js
2. В нижней части сайта пропишите ссылки на скрипт, стили, и скрипт вызова:
Код
<script src="/js/gettip.js"></script>
<link rel="stylesheet" href="/css/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>
<link rel="stylesheet" href="/css/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>
В скрипте вызова, как видно, задаются и общие настройки для подсказок.
Все файлы, для надежности, лучше сохраните себе.
3. В скрипте вызова, как видно, задаются и общие настройки для подсказок.
Код
<a href="#" data-tooltip="" title="Текст подсказки">Ссылка</a>
То есть если вы хотите чтоб у всех элементов подсказки были одинакового типа, то просто в скрипте вызова задайте общие настройки, а к нужным элементам добавьте пустой атрибут data-tooltip. Но если для какого-то элемента нужны индивидуальные настройки, то в этом атрибуте, в фигурных скобках - можно указать для него параметры, по такому же типу как и в скрипте. Например:
Код
<a href="#" data-tooltip="{offset: 20,pos: 'bottom',on: 'click',delay: 228,duration: 30}" title="Необычная подсказка">Ссылка</a>
Уважаемый посетитель!
Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Комментарии