Красивые подсказки на CSS3

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

Суть идеи

Используя псевдо – элемент CSS :hover, мы будем выводить бокс с подсказкой при наведении на другой бокс, к которому прописаны уточняющие данные. Не используется Java Script и JQuery.

При оформлении бокса с подсказками используются основные свойства CSS3: градиенты, закруглённые углы, тени. Можно конечно обойтись без них, но будет не так красиво смотреться.

Можете посмотреть демо версию, чтобы понять как это выглядит:

Код

HTML
Для примера добавим ссылку, присвоем ей класс .tip и пропишем текст подсказки в теге

<a class="tip" href="#">
  Проверка сязи
 А это подсказка, она поможет вам
</a>

CSS
Начнём оформлять присвоенный нами ранее класс .tip и подскзку в span. Оформление весьма обычное и у вас не должны возникнуть сложности.

body{background-image: url("blue_grange.jpg");}
.tip{
 background: #fdfffc;
 position: relative;
 cursor: help; /* При наведении курсора на блок, появляется знак вопроса */
 width:140px; /* Ширина блока */
 height:30px; /* Высота блока */
 display: inline-block;
 text-decoration: none;
 color: #2c2d2d;
 -moz-border-radius: 5px;
 border-radius: 5px;
 outline: none;
 top:300px;
 left:50%;
 font-size:20px;
 text-align:center;}
 
.tip:hover span{
  visibility: visible;}
 
.tip span{ /* Оформление блока с подсказкой */
 visibility: hidden;
 width: 235px;
 bottom: 40px; /* Расстояние между блоками */
 position: absolute;
 left: 50%;
 z-index: 50;
 margin-left: -125px;
 padding: 11px;
 border: 1px solid #c4c4c4;
 -moz-border-radius: 5px;
 border-radius: 5px;
 opacity: 0.9;
/* Градиент */
 background-image: -moz-linear-gradient(center bottom,#F5D1FF 2%,#EEC8FA 51%);
 background-image: -webkit-gradient(linear,left bottom,left top,
 color-stop(0.02, #F5D1FF),color-stop(0.51, #EEC8FA));
/* Тень */
 text-shadow: 0.3px 0.3px 0.8px #383038;
-webkit-box-shadow:  1px 2px 2px 1px #898989;
 -moz-box-shadow:  1px 2px 2px 1px #898989;
 box-shadow:  1px 2px 2px 1px #898989;}

CSS3 фактически используется только для оформления, а вывод и.т.п. доступны были и в старой версии каскадных стилей, поэтому такой способ будет работать на всех старых браузерах.

Использовать можно автоматически: прописать у себя на блоге в style.css все настройки оформления и в будущем при оформлении текстов просто указывать класс .tip, прописывать текст подсказки в и такой вид подсказок будет работать на всём сайте. На этом всё, спасибо за внимание.