jQuery EasyTooltip plugin

Сразу объясню, что сподвигло меня писать собственный плагин для jquery, когда уже давно есть несколько готовых.

Во-первых, это мое стремление к простоте и красоте ибо они спасут мир, а когда я взглянул на исходный код нескольких существующих, то понял, что спасать мир придется долго. Усугубило положение зависимость многих из них от других плагинов (таких как bgiframe и delegate)

Во-вторых, это невозможность менять текст тултипа «на лету».
Косвенно это можно делать изменяя атрибут title у целевого элемента, но это не совсем удобно при генерации содержимого, когда сами элементы также формируются динамически. Связано это с очередным неочевидным багом ИЕ, который не дает добавлять div всплывающей подсказки в контейнер body до завершения его формирования, т.е. вызов плагина должен осуществляться в рамках волшебной функции $(document).ready(function(){});, иначе все семейство Експлореров будет ругаться примерно так:
HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)

Ну и в-третьих, это размер. В несжатом виде у меня получилось 1,7кб

как использовать

Добавляем на страницу скрипт

<script type="text/javascript" src="scr/jquery.js"></script>
<script type="text/javascript" src="scr/jquery.easytooltip.js"></script>

в таблицу стилей класс tooltip, например

.tooltip {
	position: absolute;
	z-index: 1000;
	border: 1px solid gray;
	background-color: #FFFFD4;
	padding: 10px 10px 10px 10px;
	opacity: 0.85;
	filter: alpha(opacity=85);
}

и вызываем метод tooltip() для целевого элемента (см. примеры).

Доступны следующие параметры:

  • txt — html код подсказки, если не указан, то берется из title целевого элемента
  • maxWidth — максимальная ширина всплывающего блока
  • effect — эффект появления, может принимать значения: fadeIn (по умолчанию), slideDown, hide. Для затухания будет взят противоположный эффект.
  • duration — длительность появления/затухания

примеры

$("#tst").tooltip(); // текст tooltip'а в атрибуте title элемента

$("#tst2").tooltip({
	txt: 'Это просто пример всплывающей подсказки JavaScript!',
	maxWidth: 150
});

$("#tst3").tooltip({txt: '<img src="img/jquery.png" width="60" height="90" alt="jquery" />'});

$("#tst4").tooltip({
	txt: 'Это пример изменения эффекта появления',
	effect: 'slideDown'
});

$("#tst5").tooltip({
	txt: 'Это пример изменения длительности появления',
	effect: 'show',
	duration: 900
});

Easy Tooltip example №2
Easy Tooltip example №3
Easy Tooltip example №4
Easy Tooltip example №5

Код самого плагина можно посмотреть в исходничке — скачать jquery.easytooltip.js

13 thoughts on “jQuery EasyTooltip plugin

  1. А теперь быстро поводи по строкам. Захватывающее зрелище не правдо ли? 🙂

  2. а можешь описать как ты сделал так свои картинки (ajax, php…)?

  3. Было бы неплохо сделать не только показ, но и timeout по которому всплавающее окно прячится.

  4. Доброго времени всем, вот нарисовал очередной дизайн — верстаю, много jQuery использую, и тут подумал что нехватает тултипов и начались поиски… много видил и скажу эти хороши НО есть НО, когда много раз проводишь по ссылке, появляется фиговый такой эффект как бы подсказка продолжает мигать (появляется, исчезнет)бы ло бы хорошо устранить такую проблемку… P/S Проведите курсором быстро раз 10 по одному из примеров 😉

  5. А мне нравится Ваш сайт. Удобно, ничего лишнего. Спасибо

  6. подсказок на странице чаще всего много, и лучше указывать через класс а не ID иначе приходится на каждую кнопку навещывать отдельно, вместо того что бы указать к примеру $('.folder, .dokument, .ttTip, .lostDoc').tooltip(); но так работать ваш скрипт не будет…

  7. Да? А вы пробовали? у меня почему то работает да же вот так $('[title]').tooltip()

  8. Ели кто решил проблему, описанную выше "XAnTY", отпишитесь. Автор, похоже, к этому проекту врядли доберется.

  9. Хорошо бы имелась возможность хватать html из следующего за триггером блока, так как неудобно задавать разметку в javascript для, например, сотни тултипов.

  10. Очень удобный плагин,я сделал на нем систему контекстной помощи в пользовательском интерфейсе ЦРМ системы. Хотел разместить вариант решения в комментариях, но, к сожалению, система комментирования не пропустила мой код поэтому те кто хочет, могут посмотреть его на моём блоге. http://merlinsoft.od.ua/?blog&rek=11 Предложенное решение позволяет создавать неограниченное количество всплывающих подсказок без существенной модификации кода

  11. Неа, недоделанный тултип. Во первых, (и это самое главное) если элемент находится справа экрана и подсказка в экран не вмещается — значит она должна всплыть с левой стороны от курсора мыши, а не с правой. Во вторых, эффект мерцания, о котором писал XAnTY имеет место быть. Я сталкивался с подобным в выпадающих меню, но исправить проблему сам не сумел. И писать текст подсказки отдельно для каждого элемента вряд ли кто будет. Имхо, вот этот тултип интереснее будет: http://easywebscripts.net/javascript/tooltip.php

  12. При вызове через onmouseother почему-то не срабатывает при первом наведение мыши на объект, если второй раз наводим, то все подсказка всплывает. В чем может быть причина??

  13. провтыкали освободить очередь ефектов при последующем наведении

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *