HTML5Tooltips.js – уникальные подсказки с 3D эффектами
827материалов
228тем на форуме
3003комментария
6152пользователя

HTML5Tooltips.js – уникальные подсказки с 3D эффектами


Описание:

Сегодня мы хотели бы поделиться с вами некоторыми стилями и эффектами для создания всплывающих подсказок. Они обычно используется для вывода какой-то дополнительной информации и встречаются практически на каждом сайте. Эти маленькие помощники предлагают широкие возможности для добавления изысканных и уникальных эффектов к любому дизайну. Так что сегодня мы покажем вам некоторые возможности по стилизации всплывающих подсказок Уникальный плагин! Таких классных эффектных подсказок, да ещё на HTML5, лично я ещё не встречал!

Установка:

1. После /head на нужных страницах вставьте:
Код
<link rel="stylesheet" type="text/css" href="/css/html5tooltips.1.4.2.min.css">
<script type='text/javascript' src="/js/html5tooltips.1.4.2.min.js"></script>

2. Примеры использования:
Код
<div class="anim-item" data-tooltip="webmaster-ucoz.ru" data-tooltip-animate-function="scalein" data-tooltip-color="peacock">Наведи на меня</div>
<div class="anim-item" data-tooltip="webmaster-ucoz.ru" data-tooltip-animate-function="slidein" data-tooltip-color="peacock">Наведи на меня</div>
<div class="anim-item" data-tooltip="webmaster-ucoz.ru" data-tooltip-animate-function="roll" data-tooltip-color="peacock">Наведи на меня</div>
<div class="anim-item" data-tooltip="webmaster-ucoz.ru" data-tooltip-animate-function="spin" data-tooltip-color="peacock">Наведи на меня</div>
<div class="anim-item" data-tooltip="webmaster-ucoz.ru" data-tooltip-animate-function="foldin" data-tooltip-color="peacock">Наведи на меня</div>
Осталось лишь залить JS файл из прикреплённого архива в папку js и CSS файл в папку css

Рассмотрим параметры:

  • data-tooltip – Текст, который будет отображаться в подсказке
  • data-tooltip-animate-function – Тип анимации для подсказки (scalein, slidein, roll, spin, foldin)
  • data-tooltip-color – Цвет подсказки: названия (daffodil, olive) или HEX аналоги (#ff0000, #00ff00)
  • data-tooltip-more – Дополнительный текст в подсказке
  • data-tooltip-stickto – Позиция подсказки (left, right, top, bottom)
  • data-tooltip-maxwidth – Максимальная ширина подсказки (100, 200)

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 06.12.2015 в 17:30
Материал просмотрен: 1141 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо
Источник

3 комментария


AlexGraur
Alex Graur @AlexGraur 06.12.2015 20:211
+4
like интересное решение, но не плохо бы было более легким способом заменить подобный tooltip подсказки к alt, img, title и т.д. чтобы автоматически подствлялось а не в ручном режиме прописывать постоянно) Обычный есть просто подсказка ввиде hint но без стрелочек она(
Бармен
Спасибо то что надо.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта