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

Здравствуйте, уважаемые читатели. На одном из иностранных сайтов как-то давно скачал целую библиотеку всплывающих подсказок на CSS без использования JavaScript. Но все никак не доходили руки разобраться с этим архивом, но как раз для марафона на блоге решил подготовить статью на эту тему и заодно поделиться полезными красивыми всплывающими подсказками. Однажды я уже размещал пост, про оживление сайта в которой были всплывающие подсказки на CSS, но все они однотипные и подойдут не всем. А те, с которыми я хочу поделиться, гармонично впишутся практически в любой дизайн.

Демо

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

<a class="hint--top  hint--error" data-hint="Текст подсказки">Текст на странице</a>

Это как пример. Нужно прописывать 2 CSS класса. Один определяет положение подсказки, а второй — ее стиль. CSS код нужно добавить в ваш файл стилей. Если возникнут какие-то трудности, пишите, будем разбираться вместе, но в принципе, особо сложного здесь ничего нет, у вас все должно получится. 😉 Прошу вас обратить внимание на тот факт, что эти подсказки являются весьма кроссбраузерными. По крайней мере они отлично работают в IE-7, IE-8 и, соответственно во всех остальных популярных браузерах. Если вы решили создать сайт самостоятельно, то они вам подойдут. Лучше всего они смотрятся в браузере FireFox, в нем они всплывают более плавно. Где такие подсказки можно использовать? Я, например, применяю их к кнопке, когда есть какой-то файл для скачивания и указываю во всплывающей подсказке тип и размер загружаемого файла. Так я сделал и сейчас, только подсказки остались старые, менять пока не буду. Вы же можете их использовать даже в css таблице зебре.

СКАЧАТЬ