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

Для начала нам необходимо подключить jQuery и сам плагин, для этого нам необходимо вставить следующий код между тегами head:

Далее мы формируем непосредственно подсказки, для необходимых элементов:

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

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

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

На главную