Хаки и Скрипты Next Generation CMS

Подключаем подсказки (TOOLTIP) в вашу новость

irbees2008 irbees2008 Опубликовано - 16 - ноября Tooltips
3074 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Побродив по просторам инета ,нашел интересную реализацию подсказок.Использование CSS преобразования, границ, радиуса и SVG формы и получаются интересные подсказки.Всплывающие подсказки обычно используются для предоставления какой-то дополнительной информации, и они могут быть найдены почти на каждом сайте. Эти крошечные маленькие помощники предлагают большие возможности добавить некоторых уникальных эффектов для любой конструкции.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с вашим шаблоном папки css,fonts,img.
2.Подключаем в хеад стиль

Код:
<link rel="stylesheet" type="text/css" href="{{tpl_url}}/css/tooltip-box.css" />
3.Подключаем Классический вариант подсказок
Код:
<span class="tooltip tooltip-effect-2"><span class="tooltip-item">здесь обьект на который вешаем подсказку</span><span class="tooltip-content clearfix"><img src="здесь картинка подсказки" /><span class="tooltip-text">здесь текст подсказки</span></span></span>
4.Остальные варианты смотрим в исходнике который вы скачали,если не получается пишем комменты

Можешь почитать и вот эту статейку "Анимация подсказок в формах ?Это эффектно !!!"

Опрос

Ваше мнение

TWIG -что это?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4374 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 35
  • Генерация страницы: 0.419сек
  • Потребление памяти: 5.165 Mb 
  •   Яндекс.Метрика