jQuery tooltip — интерактивные подсказки: создание и настройка плавающих tooltip'ов

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

Зачем нужны tooltip'ы на сайте

Подсказки-всплывашки или tooltip'ы, как их принято называть в веб-разработке, выполняют несколько важных функций на сайте:

• Привлекают внимание пользователя к ключевым, но мелким элементам интерфейса вроде иконок или кнопок.
• Поясняют значение сложных терминов, которые могут быть непонятны рядовому посетителю.
• Дают советы по работе с тем или иным инструментом.
• Увеличивают юзабилити сайта за счет более комфортной навигации.

Коротко говоря, если пользователь видит подсказку при наведении на объект интерфейса - ему проще разобраться, что это за объект и зачем он нужен. А это положительно сказывается на впечатлении от сайта и желании провести на нем больше времени.

Как устроены tooltip'ы в jQuery UI

Библиотека jQuery UI, помимо прочих полезных виджетов, содержит специальный инструмент для создания подсказок - метод tooltip(). Он заменяет нативные всплывающие подсказки браузера, которые обычно привязаны к атрибуту title элемента на странице. Преимущества tooltip'ов на jQuery в том, что их можно:

• Полностью настроить под себя - внешний вид, анимации, способ позиционирования.
• Динамически управлять через JavaScript - открывать, закрывать, обновлять.
• Наполнять произвольным HTML-кодом для богатого форматирования.

Основной способ применения это вызов метода:

$('.tooltip').tooltip(options)

Где в качестве опций передается объект с настройками. Рассмотрим их подробнее.

Основные настройки tooltip'ов

Ниже перечислены ключевые параметры, которые определяют поведение tooltip'ов jQuery UI:

Этого уже достаточно, чтобы при необходимости откорректировать стандартное поведение подсказок.

Использование метода jQuery tooltip()

Метод tooltip() можно вызывать в трех вариантах:

1. Без параметров - будут созданы подсказки со значениями по умолчанию.
2. С объектом опций - настройка нужных параметров подсказок.
3. Через действия (actions) - открытие, закрытие подсказок и прочий динамический контроль.

Давайте посмотрим пример каждого варианта.

$('.tooltip').tooltip(); // Подсказки по умолчанию $('.tooltip').tooltip({ content: 'Моя подсказка' }); // Настройка параметров $('.tooltip').tooltip('open'); // Открытие подсказки

Первый вызов создаст обычные подсказки из атрибута title элементов. Второй вызов задаст собственное содержимое. Третий вызов программно откроет подсказку.

Таких действий для управления существует довольно много. Это позволяет динамически контролировать подсказки через скрипты.

Оформление подсказок с помощью CSS

Внешний вид подсказок тоже легко настраивается через CSS. Можно менять шрифты, цвета, границы, задний фон. Также часто используют дополнительные графические элементы вроде иконок или стрелок, показывающих на объект подсказки:

.ui-tooltip { background: #f5f5f5; border: 2px solid #ccc; } .ui-tooltip:before { content: '>'; position: absolute; left: -8px; }

Вот так можно добавить светло-серый фон в подсказке и стрелку-указатель слева от нее. Классы оформления можно также задать при инициализации опцией classes.

А если нужен более продвинутый дизайн и разметка tooltip'а, его можно наполнить HTML-кодом через параметр content.

Расширенные возможности и плагины

Встроенный функционал tooltip'ов в jQuery UI вполне достаточен для большинства задач. Но при необходимости существуют и расширения стандартных возможностей.

Подсказки с HTML-разметкой

Как уже упоминалось, в параметре content можно указывать не только текст, но и HTML-код. Это позволяет создавать богато оформленные подсказки с картинками, списками, ссылками, выделениями.

Сложная анимация подсказок

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

Динамические данные через Ajax

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

Полезные плагины для расширения возможностей

Ряд плагинов расширяет стандартный jquery tooltip plugin дополнительными опциями.

jQuery Tooltip Plugin

Позволяет использовать HTML и CSS в подсказках для улучшенного оформления. Также есть настройки анимации и положения.

jBox Tooltip jQuery Plugin

Отличается расширенными возможностями анимации и стилей оформления для jbox jquery tooltip. Можно настроить несколько тем оформления и эффектов перехода.

Примеры применения подсказок на сайтах

Где и как чаще всего используются всплывающие подсказки на практике?

Подсказки на элементах форм

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

Перевод непонятных слов и терминов

Часто tooltip'ы используются для пояснения специфических терминов, которые посетитель может не знать. Достаточно навести курсор на слово, и рядом появится его расшифровка или перевод.

Обозначение иконок и кнопок

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

Пошаговые инструкции

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

Всплывающие меню и навигация

С помощью расширенных плагинов можно реализовать всплывающие меню навигации, выпадающие фильтры и другие элементы управления в tooltip'ах.

Уведомления и сообщения

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