Красивые всплывающие подсказки на CSS

Приветствую вас, друзья и коллеги! Сегодня хочу рассказать вам об одной библиотеке, которая помогает выводить красивые всплывающие подсказки на CSS. Речь пойдет о Hint.css

Эта библиотека упростит создание всплывающих подсказок и поможет улучшить юзабилити вашего сайта, а в некоторых случаях и повлиять на конверсию. Как? Читайте дальше и узнаете :)

Hint.css - красивые всплывающие подсказки

Первое, что нужно сделать, это подключить hint.css к вашему проекту. Можете скопировать и вставить как в вашу таблицу стилей, так и подключить как отдельный файл. Ссылки на исходник и официальный сайт в конце статьи.

Для примера я реализовал такой блок:

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

О разных способах сделать зачеркнутый текст и о том, для чего это делать я рассказывал в этой статье. Прочитайте! Она очень коротенькая - пригодится. Так вот, дополнить и усилить ваше предложение может такая подсказка, которая укажет на количество сэкономленных денег. Ее можно сделать как постоянной, так и динамичной (Будет появляться только при наведении курсора на определенный элемент):

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

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

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

Первое, что нужно сделать - это подключить библиотеку hint.css. Я говорю библиотека, потому что в этой таблице стилей уже прописаны готовые классы и свойства к ним. Нам необходимо просто задать эти классы элементу (кнопка, ссылка, картинка и т.п.), при наведении на который будет появляться подсказка:

После того, как библиотека подключена задаем свойство "simple-hint" элементу, при наведении на который будет всплывать подсказка. В моем случае так:

<p class="newPrice">Новая цена <span simple-hint="Экономия 40%">600$</span></p>

Теперь нужно задать класс, который отвечает за то, с какой стороны будет всплывать подсказка (hint-top, hint-bottom, hint-left, hint-right);

<p class="newPrice">Новая цена <span simple-hint="Экономия 40%" class="hint-right>600$</span></p>

Если оставить так, как есть, то будет выводиться черная подсказка, причем маленького размера. Для того, чтобы управлять размером подсказки есть три псевдокласса (-s-small, -s-med, -s-big):

<p class="newPrice">Новая цена <span simple-hint="Экономия 40%" class="hint-right-s-med">600$</span></p>

Для того, чтобы задать цветную подсказку в Hint.css предусмотрено 4 "пресета" (-t-info, -t-success, -t-error, -t-notice). В своем примере я использовал -t-notice (оранжевая).

<p class="newPrice">Новая цена <span simple-hint="Экономия 40%" class="hint-right-t-notice">600$</span></p>

Для того, чтобы добавить эффект плавного появления я использовал класс hint-fade:

<p class="newPrice">Новая цена <span simple-hint="Экономия 40%" class="hint-right-t-notice hint-fade">600$</span></p>

Также, вы может реализовать эффект плавного выезжания подсказки при помощи класса hint-anim.

Для того, чтобы ознакомиться с оригинальной (полной) инструкцией, рекомендую вам посетить страничку на Github. Там же, можно загрузить исходный код проекта и почитать про дополнительные свойства для мобильных устройств и задержку в появлении подсказок.

Таким образом, подобными методами кто-то повышает конверсию на 0,1 - 0,3%, а кто-то просто читает статьи и ничего не делает. Рекомендую вам попробовать, провести АБ - тестирование и узнать, работает ли этот инструмент в вашей нише или нет. В любом случае хуже не будет :)

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

Мой исходник