Blog. Just Blog

PCL's Nice Tooltip 1.1.4

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: 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 или самое начало странички пропишите код для подключения скрипта:
  1. <script src="pcl_tooltip.js" type="text/javascript"></script>
Если скрипт размещен не в каталоге со скриптами, то надо будет указать полный путь до него. Для запуска скрипта добавьте в самый конец странички перед закрытием тега body следующий код:
  1. <script type="text/javascript"PCL_TooltipInit(); </script>
или добавьте вызов скрипта после полной загрузки страницы в тег body. Для небольших страничек этот вариант будет более правильным:
  1. <body onload="PCL_TooltipInit();">
У функции PCL_TooltipInit() есть необязательный параметр - максимальная ширина окна подсказки в пикселах. По умолчанию она равна 300, но вы можете ее изменить, например, как сделано у меня в мини-чате. Внешний вид окна всплывающей подсказки определяется в стилях. Следующий код надо прописать в css-файле или на страничке в теге style. Это цвета по умолчанию, вы можете изменить их под дизайн вашего сайта:
  1. .tooltip {
  2.   border1px #696969 solid;
  3.   padding5px;
  4.   background#FFFFE0;
  5.   color#000000;
  6.   fontnormal 12px ArialVerdana;
  7. }
Здесь надо определить только визуальные параметры, а различные технические значения вроде положения на странице, видимости, прозрачности и т.п. скрипт выставит самостоятельно. Текст подсказки берется из атрибутов alt и title заданных тегов, приоритет имеет атрибут title. По умолчанию скриптом обрабатываются только ссылки и картинки (теги a и img соответственно), но вы можете добавить нужные теги в настройках скрипта, например:
  1. // Для каких элементов устанавливать подсказки
  2. var tooltiptags = ['a''img''span''td'];
Пример картинки и ссылки с всплывающими подсказками:

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

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

PCL's Nice Tooltip 1.1.4PCL's Nice Tooltip 1.1.4

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


Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 6603 | Комментариев: 32

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (23.03.2011 в 16:45):
Ну так надо сайты нормально делать, и будет счастье. А то под любой скрипт можно найти условия, при которых он даст сбой. Под 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="-&lt;br&gt;-"
- получим <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

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0038 сек.) / Память: 4.5 Mb
Наверх