Блог ⁄ JavaScript ⁄ Всплывающие подсказки, часть 5

Рекомендую сразу посмотреть демонстрацию работы скрипта подсказки.

Скачать дёмку с настроенным скриптом для простейшего применения. Примечание: чтобы в ИЕ отображалось нормально, запускайте с локального сервера, либо разместите папку на сайте и смотрите оттуда. Такова особенность всплывающей подсказки на Prototype.

Плюсы решения:

• При превышении объёма текста высоты тултипа, появляется полоса прокрутки.
• Подсказка приэтачивается к id элемента. Поэтому её можно применять не только к тексту, ссылкам и изображениям, но и к элементам форм.
• Вставлять в подсказку можно всё, что угодно: текст, HTML, XML, изображения.
• Возможность смены дизайна облачка-подсказки.
• Отображение в четырёх позициях. Для сравнения, всплывающая подсказка на JQuery работает только в двух, нижнее левое и правое, а для верхнего левого и правого используются картинки от нижних позиций.
• При вставке в подсказку XML и XHTML через Ajax, можно сделать кэшируемой подсказку, а можно не кэшируемой.
• Настройки: на какое событие подсказке всплывать (можно на mouseover, mousemove, click и т.п.), сколько секунд отображаться после прекращения действия события, в каком месте элемента инициатора отображаться и другие.

Минусы решения:

• Подсказка не скользит за курсором. Правда, можно задать самому место отображения относительно элемента-инициатора подсказки.
• Используются громоздкие библиотеки Prototype и scriptaculous. Хотя, я даже и не пытался найти сжатые версии, так что уменьшить их вполне реально.
• Запуская скрипт на клиентской машине, в ИЕ не видно картинки-подложки, т.е. самого облачка. При запуске с сервера, всё работает идеально.

Как встроить — посмотрите в дёмке, а вот некоторые начальные настройки всплывающей подсказки я поясню:

<script type="text/javascript">
    new HelpBalloon({
    title: 'Заголовок подсказки',
    content: 'Текст подсказки, поддерживается HTML, только не забывайте экранировать одинарные кавычки вот так: \'.',
    useEvent: ['mouseover'], // событие, при котором появится всплывающая подсказка на Prototype
    autoHideTimeout: 5000, // Через сколько милисекунд исчезнет (в данном случае через 5 секунд)
    icon: $('anchor1') // id элемента, к которому привязывается всплывающая подсказка
    });
</script>

Сайт разработчиков www.beascott.com. Прикладной программный интерфейс (API).