Спливаюча підказка

Підказка річ НЕ нова, але коли виникає необхідність реалізувати у себе на сторінці, то часто виникає питання: як краще зробити? Варіантів для реалізації підказки безліч: будь-то великі бібліотеки, наприклад, jQuery або MooTools, або готові плагіни, а хтось просто скористається стандартними засобами HTML і CSS. Головне: зробити упливає підказку цікавою і привабливою для користувача.

Сьогодні ми будемо робити три види підказок: текстова підказка, підказка з посиланням і підказка з картинкою. Для цього ми будемо використовувати лише HTML і CSS3.

І так, давайте притупити і почнемо c розмітки нашої майбутньої підказки:

Тепер займемося CSS стилями і почнемо, мабуть, з обгортки:

За допомогою позиціонування ми поміщаємо підказку в потрібне нам місце, а також задаємо стилі для візуалізації і загальні стилі для внутрішніх елементів.

Скористаємося псевдоелементи before і додамо в обгортку знак питання - це поінформує нашого відвідувача, про те, де можна отримати пояснювальну інформацію.

Весь пояснює контент, який буде знаходитися в підказці, ми помістимо в елемент p, але це умовно, можна використовувати будь-який інший тег, головне його заховати і отпозіціоніровать щодо обгортки.

Користувач наводить курсор на підказку, а ми показуємо захований контент. Для того щоб додати плавність використовуємо властивість з CSS3 animation.

І завершальна частина - це додавання стрілочки.

Обіцяв три, а зробили на зразок, як тільки одну - метод універсальний, в обгортку можна класти все що завгодно, навіть солідний шматок HTML коду, якщо, звичайно, неабияк попітніти з підгонкою стилів: