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)

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

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

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

<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 №1

Easy Tooltip example №2

Easy Tooltip example №3

Easy Tooltip example №4

Easy Tooltip example №5

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

Доброго времени всем, вот нарисовал очередной дизайн - верстаю, много jQuery использую, и тут подумал что нехватает тултипов и начались поиски... много видил и скажу эти хороши НО есть НО, когда много раз проводишь по ссылке, появляется фиговый такой эффект как бы подсказка продолжает мигать (появляется, исчезнет)бы ло бы хорошо устранить такую проблемку...

P/S Проведите курсором быстро раз 10 по одному из примеров ;)

Александр Сергеевич 30.06.10 11:34

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

anonymous 10.07.10 00:40

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

Alek Veritov 10.07.10 11:55

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

Николай Д. 04.04.11 18:27

Ели кто решил проблему, описанную выше "XAnTY", отпишитесь.

Автор, похоже, к этому проекту врядли доберется.

Skyve 02.08.11 12:13

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

merly2k@mail.ru 17.12.11 14:18

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

Сергей 19.12.11 21:27

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

Если вам помогла или просто понравилась эта статья вы можете отблагодарить автора кликнув по рекламе. Спасибо!

комментировать:

прежде чем писать комментарий убедитесь, пожалуйста, что он не попадает в нижеследующие категории:

не стоит писать "я чайник, помогите ..." или "я начинающий, объясните ..." - уважайте себя! может вы и новичок, но ведь не тупой же! сами вполне способны во всем разобраться, тем более, что материал здесь изложен весьма доступно
не пишите вопросы типа "как мне сделать такую же менюху как наверху?", "куда вставлять этот код?", "как устроен интернет?" и т.д. - уважайте время автора!
комментарии вида "все, что здесь написано - бред" будут оставлены только если будут подписаны "я такой-то, разработчик сайта такого-то с посещаемостью 1000 хостов в день" и т.п. Если вы не согласны с чем-то - обоснуйте, напишите как правильно, а писать простые ругательства не надо, это не забор

прямые оскорбления кого бы то ни было будут удалятся!
здоровая критика приветствуется!

от кого: