Gorik: jQuery toolTip

Описание:

Скрипт, в виде jQuery плагина, для показа простых дизайнерских подсказок на странице.

Примеры

Обычный вариант
Подсказка с текстомТекст с подсказкой.
Вариант с картинкой
Картинка для текстаКартинка для текста Текст для картинки
Контент в другом блоке (удобно когда один и тот же текст показывается на куче элементов)
Здесь подсказка такая же как и здесь.
Одна подсказка для всех
Одна подсказка для всех
Тултип по клику
Подсказка с текстомТекст с подсказкой.
Контент в атрибуте
текст одинПодсказка 1, текст два.Подсказка 2

Подключение:

  • Подключаем библиотеку jQuery 1.10.0+
  • Подключаем плагин tool.tip.js
  • Подключаем скрипт для нужного нам элемента:
        $('document').ready(function(){
           $('.js_this_tooltip').toolTip();
        });
      
  • Прописываем стили для .tooltip (есть в примере в css/styles.css).

* Я не особо люблю инлайнить стили скриптом, посему все стили прописаны ручками в css (выделено /*THIS CSS*/)

Параметры:

interval - интервал в ms перед затуханием подсказки. Возможные значения от: 0. Значение по умолчанию: 200;

duration - длительность в ms эфекта затухания. Возможные значения от: 0. Значение по умолчанию: 200;

left - смещение в px по горизонтали относительно центра элемента.

top - смещение в px по вертикали относительно верха элемента.

content - jQuery объект содержащий контент для тултипа.

contentFunc - функция относительно (this), возвращающая контент для тултипа. Нарпимер: function(){return $(this).closest('li').find('.tooltip_text').html();}

action - альтернативный event для вызова тултипа Возможные значения: любой тригер для элемента. Нарпимер: "click", "change", "my_event";

Ресурсы:

Файл JS tool.tip.js

Файл CSS styles.css