Hint.css - красиві спливаючі підказки
Перше, що потрібно зробити, це підключити hint.css до вашого проекту. Можете скопіювати і вставити як в вашу таблицю стилів, так і підключити як окремий файл. Посилання на исходник і офіційний сайт в кінці статті.
Для прикладу я реалізував такий блок:
При наведенні на нову ціну буде появляється підказка, в якій буде повідомлення про те, скільки людина заощаджує, купуючи товар зараз.
Про різних способах зробити закреслений текст і про те, для чого це робити я розповідав в цій статті. Прочитайте! Вона дуже коротенька - стане в нагоді. Так ось, доповнити і посилити вашу пропозицію може така підказка, яка вкаже на кількість зекономлених грошей. Її можна зробити як постійної, так і динамічною (З'являтиметься тільки при наведенні курсору на певний елемент):
Можна міняти колір, задавати анімацію при появі, міняти розташування і т.д. Іноді - цей елемент необхідний, іноді можна спробувати підняти конверсію, як, наприклад, в даному випадку. Іноді, подібна підказка може зіграти як нині добиває фактор, який остаточно переконає користувача купити.
Звичайно, можна і безпосередньо написати де-небудь про економію, але не завжди є місце для цього або з якихось причин немає можливості гармонійно вписати в дизайн дане повідомлення.
Так чи інакше підказка виглядає непогано, і я рекомендую вам її використовувати. Давайте приступимо.
Після того, як бібліотека підключена задаємо властивість "simple-hint" елементу, при наведенні на який буде спливати підказка. У моєму випадку так:
Тепер потрібно задати клас, який відповідає за те, з якого боку буде спливати підказка (hint-top, hint-bottom, hint-left, hint-right);
Якщо залишити так, як є, то буде виводитися чорна підказка, причому маленького розміру. Для того, щоб управляти розміром підказки є три псевдокласу (-s-small, -s-med, -s-big):
Для того, щоб задати кольорову підказку в Hint.css передбачено 4 "пресету" (-t-info, -t-success, -t-error, -t-notice). У своєму прикладі я використовував -t-notice (помаранчева).
Для того, щоб додати ефект плавного появи я використовував клас hint-fade:
Також, ви може реалізувати ефект плавного виезжанія підказки за допомогою класу hint-anim.
Для того, щоб ознайомитися з оригінальною (повної) інструкцією, рекомендую вам відвідати сторінку на Github. Там же, можна завантажити вихідний код проекту і почитати про додаткові властивості для мобільних пристроїв і затримку в появі підказок.
Таким чином, подібними методами хтось підвищує конверсію на 0,1 - 0,3%, а хтось просто читає статті і нічого не робить. Рекомендую вам спробувати, провести АБ - тестування і дізнатися, чи працює цей інструмент у вашій ніші чи ні. У будь-якому випадку гірше не буде :)