Всплывающая подсказка: функции и способы создания

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

Видео: Как создавать всплывающую подсказку в Adobe Muse

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

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

Видео: Всплывающая подсказка к элементам в Adobe Muse

- открываем документ в редактируемом режиме либо в режиме разработки-




- добавляем в него новый элемент управления (это может быть изображение, текстовое поле, прямоугольник)-

- щелкаем на данном элементе управления правой кнопкой компьютерной мыши, выбираем в появившемся после этого списке пункт «Свойства и форматирование», далее открывается окно с одноименным названием-

- выбираем параметр «Общие», расположенный слева, в появившемся после этого поле «Всплывающая подсказка» набираем нужный нам текст, который и будет в ней отображаться-

Видео: jQuery #6: всплывающая подсказка (tooltip)

- нажимаем «Ок» для того, чтобы завершить редактирование документа.



Совершенно иначе обстоит дело с подсказками, которые применяются на страницах сайтов. Созданием их занимаются веб-разработчики, как правило, те, кто занимается версткой сайта, то есть переведением его макета на языки, понятные любому современному интернет-обозревателю. Для подобных целей чаще всего применяется специальная библиотека jquery, всплывающие подсказки с помощью нее могут быть созданы достаточно быстро. Данная библиотека в качестве отдельного документа легко и просто подключается к основному html-документу страницы сайта. В зависимости от замысла дизайнера подсказки могут отличаться размером, цветом, способом появления на экране пользователя. Стандартная всплывающая подсказка чаще применяется для привлечения внимания посетителей каких-либо серьезных порталов (медицинского, строительного) и представляет собой небольшое окно с располагающимся внутри него текстом.

Видео: Access 2013-5: динамическая всплывающая подсказка

Создание всплывающей подсказки возможно с помощью каскадных таблиц стилей (css) без использования при этом библиотеки jquery. Css является формальным языком описания внешнего вида документа. С его помощью страницы сайта приобретают вид, который изначально задумывался дизайнером. Каскадные таблицы стилей позволяют изменять внешний вид любого элемента страницы, его положение относительно окна браузера и других элементов, оформлять данные элементы в соответствии с макетом сайта, скрывать их и обеспечивать их появление по мере необходимости. Документ Css, как правило, выносится за пределы основного документа страницы сайта и подключается к нему с помощью специального тега.

Всплывающая подсказка: jquery или css?

Подсказки, созданные с применением css, могут отличаться большой оригинальностью внешнего оформления. В то же время использование библиотек jquery позволяет применять к элементу особые спецэффекты. Кроме того, подключение библиотеки – процесс нетрудоемкий и не требует большого количества времени. Каким способом создавать всплывающую подсказку на странице сайта, каждый специалист решает для себя сам. Более того, обычный пользователь данного сайта, как правило, не задумывается над тем, как именно были созданы составляющие его элементы. К слову о преимуществах использования библиотек jquery, зачем изобретать велосипед, если можно просто немного улучшить то, что уже изобретено?



Внимание, только СЕГОДНЯ!


Поделись в соцсетях:
Оцени статью:


Похожее
» » » Всплывающая подсказка: функции и способы создания