Tooltip или добавляем всплывающие подсказки в записи

Всплывающие подсказки можно встретить на многих сайтах. Так почему же они столь востребованы и популярны? Вот некоторые из причин:

• удобны и просты в использовании;
• дают возможность обратить внимание читателей именно на то слово или выражение, которое мы хотим сделать ключевым, центральным в своей записи;
• помогают разъяснить тот или иной момент, не занимая лишнее место на «основной бумаге» — всплывающие подсказки — это аналоги стикеров, которые всегда есть под рукой на столе;
• в случае надобности, сообщают об ошибке;
• помогают пользователям заполнять формы на вашем блоге, освещая сложные пункты.

[pullquote align=»left»] И, поднимая тему о всплывающих подсказках, мы рассмотрим плагин Easy Tooltip, который позволяет легко добавлять подсказки, которые имеют, для каждого случая, свой уникальный дизайн. [/pullquote]

Примеры всплывающих подсказок по их наименованиям в настройках плагина(наводим курсор на подчеркнутый текст):

[tooltip title=»» content=»Какая-либо дополнительная информация по этому слову, выражению или фразе.» type=»classic» ]Classic — Любая информация по вопросу.[/tooltip]

[tooltip title=»Ошибка » content=»Сообщение об ошибке, допущенной пользователем.» type=»critical» ]Critical — Сообщение об ошибке.[/tooltip]

[tooltip title=»Помощь» content=»Помощь по интересующему вопросу.» type=»help» ]Help — Помощь, которую часто графически изображают в виде вопросительного знака.[/tooltip]

[tooltip title=»Инфо» content=»Дополнительная или более полная информация по выделенному моменту. » type=»info» ]Info — дополнительная или более полная информация по выделенному моменту.[/tooltip]

[tooltip title=»Внимание!» content=»Информация, предупреждающая о чем-либо, предостерегающая или просто привлекающая к себе внимание.» type=»warning» ]Warning — Важно![/tooltip]

Для того, чтобы создать подобные подсказки в своем блоге, достаточно скачать плагин Easy Tooltip, загрузить на свой сайт и активировать.

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

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