vTip - простые подсказки title в тексте

vtip plugin jquery
Люблю я jQuery плагины подсказок (tips), неоднократно писал про них, хочу вернуться к этой теме и показать одну очень легковесную реализацию анимированно всплывающего облачка для текста статьи. Причём подсказку придумывать отдельно не нужно, она берётся из незаменимого для SEO атрибута title.
Называется сегодняшний гость: плагин подсказок vTip. Работает он на двух легковесных файлах: vtip-min.js (всего 700 байт) и vtip.css (260 байт).

По традиции показываю, как подсказка vTip работает (наведите на ссылку курсор мыши) ↓


Для ссылки:
Dofollow блоги 2012 года

И для текста:
Не лает, не кусает и в дом не пускает.
Кто это?

Установка в блог:
1) jQuery.
2) Делаем резервную копию шаблона и в редакторе перед тегом </head> ссылки на скрипт и стили:
<script src="vtip-min.js" type="text/javascript">
</script>
<link href="vtip.css" rel="stylesheet" type="text/css"></link>
И конечно не забываем скачать эти файлы:

Переложить на собственный хостинг, к примеру, Dropbox, а ссылки к ним подставить в приведённый мной код (см. выше).

После чего в статье, используя класс "vtip", сможете превратить атрибут title в изящную подсказку.

Пример html кодов vTip ↓
Для ссылки:
<a class="vtip" href="http://blogger.omg-linux.ru/2011/12/dofollow-blogi-2012.html" title="Dofollow блоги 2012 года, проспамь грамотно свой линк">Dofollow блоги 2012 года</a>

Для текста
:
<div class="vtip" title="Секьюрити">Кто это?</div>

Источник:
Very lightweight tooltips vTip

Ссылки по теме:
Видео-подсказки или Всплывающий плеер Youtube

2 комментария:

  1. "Переложить на собственный хостинг, к примеру, Dropbox, а ссылки к ним подставить в приведённый мной код"
    Вопрос: Подскажите как сделать ссылку из Dropbox

    ОтветитьУдалить