Очень простые в использовании, но, в то же время, исключительно стильные и удобные всплывающие подсказки для вашего сайта
Для начала посмотрите
ДЕМО
Официальный сайт плагина:
ПОСМОТРЕТЬ
Установка:
1#: На нужных страницах между head и /head вставьте:
|
<link type="text/css" rel="stylesheet" href="/css/gettip.css"> |
2#: На этих же страницах сразу после тега body вставьте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
|
<script src="/js/jquery.gettip.js"></script> <script> $(function(){ $('[data-tooltip]').getTip({ // Отступ сверху "offset" : 8, // Позиция подсказки (Слева, сверху, справа, снизу) // ("left", "top", "right", "bottom") "pos" : "top", // Событие для вызова (При наведении, Клике, Фокусе) // ("hover", "click", "focus") "on" : "hover", // Через сколько показать подсказку "delay" : 0, // Скорость анимации "duration" : 200, }); }); </script> |
3#: Пример HTML кода, который плагин начнёт обрабатывать:
|
<button data-tooltip="" title="Я - подсказка">Наведи на меня</button> |
Вы также можете указывать опции для подсказки прямо в атрибуте:
|
<button data-tooltip="{pos: 'bottom', delay: 500}" title="Я - подсказка">Наведи на меня</button> |
Осталось лишь залить CSS файл из прикреплённого архива в папку
css и JS файл в папку
js
Возникли вопросы? Задайте их в комментариях
Автор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
Комментарии: 393Публикации: 1096Регистрация: 27-08-2018