Подсказки

На чистом CSS с помощью HINT.css

Пример
Код

Позиции подсказок

Наведи курсор :)
<span class="hint--top" data-hint="Текст подсказки">Текст</span>
Еще одна подсказка
<span class="hint--right" data-hint="Текст подсказки">Текст</span>
Где я еще могу быть?
<span class="hint--bottom" data-hint="Текст подсказки">Текст</span>
Ну и последняя сторона
<span class="hint--left" data-hint="Текст подсказки">Текст</span>

Подсказка для изображения

<p>
	<span class="hint--right" data-hint="Текст подсказки"><img src="путь до картинки">Текст</span>
</p>

Цветные подсказки

Произойдет что-то страшное при наведении
<span class="hint--top hint--error" data-hint="Текст подсказки">Текст</span>
Так будет выглядеть ошибка
<span class="hint--right hint--warning" data-hint="Текст подсказки">Текст</span>
Важная информация
<span class="hint--left hint--info" data-hint="Текст подсказки">Текст</span>
Это подсказка успеха
<span class="hint--bottom hint--success" data-hint="Текст подсказки">Текст</span>

Дополнительно

Вы можете делать...
<span class="hint--right hint--always" data-hint="Текст подсказки">Текст</span>
Хм... Вам не нравятся прямые углы?
<span class="hint--bottom hint--rounded" data-hint="Текст подсказки">Текст</span>

Спасибо

Проект HINT.css на GitHub