PCL's Nice Tooltip 1.1.4

Blog. Just Blog

14.03.2011 | Категория: Web-мастеру и не только | Автор: ManHunter

Для оформления этого блога мне понадобился хороший скрипт, показывающий всплывающие подсказки при наведении курсора мышки на определенные элементы страницы. Например, на картинки или ссылки. Готовыми скриптами я не пользуюсь, поэтому и здесь решил написать свой. Тем более я пока не встретил ни одного скрипта всплывающих подсказок, который обладал бы нужным мне функционалом. Так на свет появился скрипт PCL's Nice Tooltip, которым я с удовольствием с вами поделюсь.

Описание и возможности PCL's Nice Tooltip:

Кроссбраузерность. Скрипт протестирован и гарантированно работает в браузерах Internet Explorer 5.x-8.x и IE-based (Avant Browser, TheWorld, Maxthon и других), Gecko-based (Firefox, Mozilla, Netscape 8.x-9.x, K-Meleon и других), Opera 7.x-10.x, WebKit-based (Safari, Google Chrome, Iron и других). Поддерживаются различные типы DOCTYPE web-страниц.
Всплывающее окно подсказки автоматически подстраивается под размер текста, длинный текст переносится. Подсказка не выходит за пределы экрана и всегда целиком находится в видимой области web-страницы, размер окна подсказки при достижении краев экрана не искажается. Корректно обрабатывается вертикальная и горизонтальная прокрутка, а также фреймы.
Простое подключение скрипта, не требующее никаких навыков программирования. Для продвинутых пользователей смена внешнего вида окна подсказки через собственные стили, расширение списка поддерживаемых тегов. Подключаемый скрипт имеет очень небольшой размер и не требует для работы дополнительных файлов.
Хорошая интеграция скрипта с различными AJAX-компонентами. После загрузки через AJAX и обновления какого-нибудь фрагмента текста на странице достаточно вызвать всего одну функцию PCL_TooltipUpdate() и всплывающие подсказки сразу будут доступны в обновленной части страницы. Пример - динамический AJAX-календарик у меня на сайте.
Скрипт абсолютно бесплатный, единственным условием его использования является сохранение в исходном коде скрипта информации об авторе и ссылки на этот сайт. Категорически запрещается распространять скрипт PCL's Nice Tooltip за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов! Всех барыг на кол.

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

Установка скрипта. Скачайте прилагаемый архив, распакуйте из него файл pcl_tooltip.js и поместите в каталог с вашими скриптами. В заголовок head или самое начало странички пропишите код для подключения скрипта:

Code (HTML) : Убрать нумерацию

<script src="pcl_tooltip.js" type="text/javascript"></script>

Если скрипт размещен не в каталоге со скриптами, то надо будет указать полный путь до него. Для запуска скрипта добавьте в самый конец странички перед закрытием тега body следующий код:

Code (HTML) : Убрать нумерацию

<script type="text/javascript"> PCL_TooltipInit(); </script>

или добавьте вызов скрипта после полной загрузки страницы в тег body. Для небольших страничек этот вариант будет более правильным:

Code (HTML) : Убрать нумерацию

<body onload="PCL_TooltipInit();">

У функции PCL_TooltipInit() есть необязательный параметр - максимальная ширина окна подсказки в пикселах. По умолчанию она равна 300, но вы можете ее изменить, например, как сделано у меня в мини-чате. Внешний вид окна всплывающей подсказки определяется в стилях. Следующий код надо прописать в css-файле или на страничке в теге style. Это цвета по умолчанию, вы можете изменить их под дизайн вашего сайта:

Code (HTML) : Убрать нумерацию

.tooltip {
border: 1px #696969 solid;
padding: 5px;
background: #FFFFE0;
color: #000000;
font: normal 12px Arial, Verdana;
}

Здесь надо определить только визуальные параметры, а различные технические значения вроде положения на странице, видимости, прозрачности и т.п. скрипт выставит самостоятельно. Текст подсказки берется из атрибутов alt и title заданных тегов, приоритет имеет атрибут title. По умолчанию скриптом обрабатываются только ссылки и картинки (теги a и img соответственно), но вы можете добавить нужные теги в настройках скрипта, например:

Code (JavaScript) : Убрать нумерацию

// Для каких элементов устанавливать подсказки
var tooltiptags = ['a', 'img', 'span', 'td'];

Пример картинки и ссылки с всплывающими подсказками:

Превед! Я - картинка с Alt-текстом!

Или вот такая ссылка. Для появления всплывающей подсказки просто наведите курсор мышки на картинку или ссылку. Скрипт работает на стороне клиента и никаким образом не влияет на исходный код и обработку ваших страниц поисковыми системами. При отключенных скриптах посетитель вашего сайта увидит обычные всплывающие подсказки, показываемые встроенными средствами браузера. В приложении сам скрипт и пример его использования с подробными комментариями.

PCL's Nice Tooltip 1.1.4

PCLs.Nice.Tooltip.1.1.4.zip (6,951 bytes)

Просмотров: 4175 | Комментариев: 32

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

coolakov (23.03.2011 в 16:44):

Хороший скрипт, спасибо, но нашел пару багов.
1. При расположении картинки/ссылки близко к правой границе браузера в ФФ подсказка уползает за границу экрана пикселей на 10, и при этом появляется горизонтальный скрол. В остальных браузерах вроде ок.
2. Не то чтоб баг, но особенность: если body имеет ширину не 100% и при этом position: relative; margin: 0 auto, то координаты появления подсказки слабо предсказуемы.

Lazy_Kent (16.03.2011 в 00:17):

Нет подсказки на картинке "Превед!". На картинке "Это я" и в остальных местах есть.

Браузер Konqueror 3.5.10 (KDE 3.5.10 openSUSE 11.3).

ManHunter (15.03.2011 в 11:21):

В новой версии улучшена работа с вложенными тегами, оптимизирована общая работа скрипта, сделаны мелкие доработки.

nebot (02.01.2011 в 01:38):

ManHunter , оч приятно читать //комменты (пояснения работы) скрипта на русском , а не английском языке.
Это такая редкость :) Кстати на css можно подобное делать, с той лишь разницей, что
всплывающая подсказка не будет бегать за курсором :) Да и !doctype уже становится 'историей' c приходом html5.

Isaev (07.11.2010 в 05:24):

приятная вещь!

Станислав Шмелев (06.11.2010 в 00:56):

Спасибо Дмитрий за скрипт, работа замечательная. Но только уже вторая попытка его установить(первая была в августе)полностью провалилась. Я пытался установить его на блог с движком WP, пробовал поместить в папки со скриптами в каталогах wp-includes и в wp-admin(поочередно). Код для для запуска скрипта прописывал в шапке шаблона между тегами head. Результата никакого, советом по расположению кода прописки между тегами body не воспользовался, т.к. не знаю как прописать полный путь к скрипту. Вот такая чехарда получилась. Может новая версия пойдет как надо, либо не знаю...

ManHunter (28.10.2010 в 11:59):

Для этого придется адаптировать скрипт к какому-нибудь фреймворку, или для частных случаев просто изменить проверку типа

var your_class='ttip';
var pattern = new RegExp("(^|\\s)"+your_class+"(\\s|$)");

if (pattern.test(x.className) &&
((typeof(x.alt)=='string' && x.alt!='') ||
(typeof(x.title)=='string' && x.title!=''))
) { ...

LaeX (28.10.2010 в 11:52):

А можно сделать так, чтобы скриптом обрабатывались только все теги <img> с классом .foto, или ссылки с классом .download, или же просто все теги с классом .ttip?

Outviewer (28.10.2010 в 10:13):

Ваш код можно ставить в рамочку и вешать на стену, чтобы всегда перед глазами был пример, как надо писать.
Спасибо за прекрасный скрипт.

ManHunter (27.10.2010 в 00:01):

В новой версии исправлена ошибка, приводящая к дерганью экрана при появлении подсказки. Добавлена точная подстройка блока подсказки под размер многострочной подсказки.

ManHunter (11.08.2010 в 22:00):

Скоро выложу новую версию, там скачков не будет. Пока можешь скопировать с этого сайта.

Роман (11.08.2010 в 21:46):

У меня проблема с этим скриптом. После обновления страницы, она(страница) становиться на 10 px больше. Когда навожу на какой-либо объект с параметром title страница РЕЗКО принимает прежний вид (-10 px)
Как этого можно избежать?

Роман (26.07.2010 в 13:33):

Спасибо за скрипт, давно искал.

Олег (01.02.2010 в 11:48):

Спасибо.

ManHunter (29.01.2010 в 19:25):

Ну раз спросил, то можно :)

Олег (29.01.2010 в 19:24):

Наша фирма делает специальные сайты и ставит их на сервера клиентов.
Сайти эти не для публичного пользования, ими пользуются только клиенты. Сайты эти продаются.
Можно ли использовать эту библиотеку в этом случае?

Гонщик (31.08.2009 в 15:01):

Цитата: "...Готовыми скриптами я не пользуюсь..."
Зато очень много народа пользуется Вашими готовыми скриптами. Огромное спасибo!

ManHunter (25.05.2009 в 09:50):

Серьезно? Протестировано в IE с 5 по 8, везде работает. "Не работает" - это когда не работает файл example.html из архива. А чьи-то кривые руки я исправляю только за деньги.

lewonchik (25.05.2009 в 05:09):

Обнаружил проблему - в ИЕ при подключенном скрипте страница вообще не отображается, виден только общий фон страницы и больше ничего!!!

ManHunter (06.05.2009 в 09:26):

Обработку Alt из скрипта убрать недолго, а title штатными средствами браузера всплывает очень долго. Да, 1 секунда - это уже дофига, мне надо мгновенно, потому и был написан этот скрипт. А использовать его или нет, это уже пусть каждый решает сам.

3des (06.05.2009 в 09:15):

Поставил, долго не мог понять чем хуже атрибут титле выводится броузером, вывод алт откровенно мешает, выводя при наведении на каждой картинке. Попробовал добавить свой атрибут в скрипт. Експлорер обрабатывает его а хром игнорирует. Нахожусь в глубоких размышлениях, стоит ли применить этот скрипт в задаче по выводу подсказки при наведении мышки на значек ? или доверить это броузеру. Понятно что можно менять цвета и размеры но в общем то это не к чему, дизайнеры броузеров уже за нас это продумали.

Надюша (08.03.2009 в 00:21):

Лучше видать не нашлось, а понимаю - весна пришла, хотя можно было, и обойтись одной улыбкой мартовского кота :)

ManHunter (06.03.2009 в 16:23):

Картинку нет, позаимствовал из Интернета.

Надюша (06.03.2009 в 01:30):

а картинку тоже руками? :)

ManHunter (03.03.2009 в 23:31):

Руками делал, в блокнотике RPad32. Про здешний модуль AJAX наверное как-нибудь тоже нарисую статейку.

dimon (03.03.2009 в 23:26):

расскажите пожалуйста,как вы сделали ajax календарик.

dimon (03.03.2009 в 23:24):

респект!

ManHunter (03.03.2009 в 21:44):

В конкретном этом случае никаких предупреждалок не надо. С отключенными скриптами у параноиков будут отображаться стандартные браузерные Alt и Title.

Nutscracker (03.03.2009 в 21:38):

> P.S. "Работает? Не трогай!" (С) суровые программисты
Вот и я, видимо, до пока не припрет (или не захочется странного) играться с подсказками не буду. И до нормального учета выходов за края страницы мне еще доходить не доводилось...
Мне тут подумалось, что может получиться хороший вариант с подсказками на CSS:hover + перемещение и учет границ при движении курсора средствами js.

Да, еще одно наблюдение: при прокрутке страницы колесиком мыши подсказок не наблюдается, хотя Firebug ( https://addons.mozilla.org/ru/...x/addon/1843 ) утверждает, что mouseover и mouseout при этом вполне себе происходят (соответственно, не исключается реализуемость).

Да, кстати, в случае существенных отличий при отображении с и без js я предпочитаю вешать предупреждалку для параноиков.

ManHunter (03.03.2009 в 07:51):

Nutscracker, по поводу тегов - это так и задумано. В подсказке на самом деле можно использовать html, просто это не документировано.
По mouseover надо будет посмотреть, может получится сделать какое-нибудь красивое решение.

P.S. "Работает? Не трогай!" (С) суровые программисты

Nutscracker (03.03.2009 в 01:50):

Будет глюк при, например,
title="-<br>-"
- получим <br> и перенос строки.

По-моему, нужно или вместо
elt.innerHTML = "...";
делать
elt.replaceChild(document.createTextNode("..."), elt.firstChild);
, или делать возможность выбора, скажем, при
/(^|\s)someClass(\s|$)/.test(elt.className)

Если это существенно, конечно. :D

P.S. А к чему PCL_TooltipUpdate(), если можно просто перехватывать mouseover и при наличии соответствующих атрибутов (точнее, уже свойств, конечно :)) делать нужные преобразования "на лету"?

P.P.S. А вообще, мне вот такая штука нравится: http://psacake.com/web/jl.asp
Наверное, из-за вредной привычки ходить по интернетам с отключенным js. :D

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Вам помог этот сайт?

Поблагодарили 7,581 раз

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Пробел

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="http://www.manhunter.ru" target="_blank"><img src="http://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

	Google PR: 3		Яндекс тИЦ: 70
	Google Page Speed score: 94/100

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2012
При использовании материалов ссылка на сайт обязательна
Время генерации: 0,27 сек. / MySQL: 2 (0,0013 сек.) / Память: 3,5 Mb

	2012 - МАЙ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

PCL's Nice Tooltip 1.1.4

Комментарии

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