GetTip - настраиваемые всплывающие подсказки для uCoz
Увы, шаблон недоступен для скачивания или покупки, в связи с обращением правообладателя!
По всем вопросам обращайтесь к Администратору.
По всем вопросам обращайтесь к Администратору.
Особенности:
• Отображение при наведении, нажатии или фокусировке.
• Параметры могут быть заданы через атрибут 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>
<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>
Теги:
0 Комментариев