MEL.Tipper

Описание

Этот небольшой плагин для jQuery позволяет очень просто добавить мгновенно-всплывающие подсказки (tooltips) к любому элементу на странице.

Совместимость

Плагин протестирован в следующих браузерах:

  • Mozilla Firefox 2.0 / 3.0
  • Opera 9.25
  • Internet Explorer 7.0

Изменения

1.2.1

  • Тултип теперь двигается за курсором;

1.2.0

  • Исправлено позиционирование тултипа справа и снизу около границы окна, когда тултип вылезал за границу и из-за этого появлялся скроллинг;
  • Добавлена возможность удаления тултипа у элемента путем вызова функции $(element).tip() без параметра;
  • Функция инициализации всех тултипов на странице была изменена с $.reTips() на $.initTips();

Демо

Открыть (в новом окне)

Скачать

MEL.Tipper 1.2.1

Установка

Добавьте следующий код в HEAD страницы или шаблона:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mel.tipper.js"></script>

Использование

Для добавления всплывающей подсказки к любому элементу необходимо просто добавить атрибут tip с текстом подсказки:

<img src="img.jpg" tip="My tooltip!" />

Если же вы создаете элемент динамически и хотите добавить к нему тултип, то для этого существует функция tip(’текст подсказки’):

$('<p>Check It!</p>').tip('My tooltip!').appendTo('body');

Чтобы удалить тултип у элемента нужно вызвать функцию tip() без параметра:

$('p').tip();

Для того чтобы мгновенно изменить стиль отображения тултипа используется функция $.styleTip() с массивом {ключ_стиля: значение} в качестве параметра:

$.styleTip({
    border: '3px solid #999',
    background: '#333',
    color: '#fff'
});

Если вам вдруг потребуется ре-инициализировать тултипы всех элементов на странице, то вы можете вызвать функцию $.initTips().