Простые подсказки на CSS3 и HTML5

Пример работы простой подсказки выполненной с помощью CSS3 и HTML5

HTML

<div class="demo">
 <p>Пример работы простой подсказки выполненной с помощью CSS3 и HTML5. При наведении на <a href="#" data-tooltip="Я простая но очень нужная порой подсказка на CSS3">ссылку</a> появляется подсказка. Удобно использовать не прибегая к помощи специальных javascript и дополнительных плагинов. Данный метод вывода подсказки к ссылке, поддерживается всеми <a href="#" data-tooltip="Firefox, Chrome, Opera, Safari и IE10+ и даже старые версии IE, справляются с поддержкой, правда скругление углов и прозрачность вы в них не увидите">современными браузерами</a>.</p>
</div>

CSS

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.demo {
    max-width: 550px;
    margin: 5% auto;
    font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
}
a { 
    border-bottom:1px solid #bbb;
    color:#666;
    text-decoration:none;
}
a:hover,
a:focus {
    color:#36c;
}
a:active {
    top:1px; 
}
/**
 * Формируем стили подсказки
*/
 
/* атрибут элемента с подсказкой */
[data-tooltip] {
  display:inline-block;
  position:relative;
  /* определяем вид курсора если это не ссылка */
  cursor: pointer; 
 } 
/*  по умолчанию скрываем содержимое подсказки */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* формируем тело подсказки */
[data-tooltip]:before {
    background: #006104; /* фон для старых браузеров */
    background: hsla(110,100%,17%,.9);
    bottom: 100%;
    margin-bottom: 6px;
    color: #f6f6f6;
    content: attr(data-tooltip);/* Часть кода, определяющая содержимое всплывающей подсказки */
    font-size: 14px;
    width: 320px; /* устанавливаем необходимую фиксированную ширину, слова будут переноситься */
    left: 0;
    padding: 7px 10px;
    position: absolute;/* обязательно позиционирум абсолютно */
    text-shadow: 0 1px 1px hsla(0,0%,0%,1);/* тень для текста */
    /* по желанию - скругляем углы тела подсказки */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
/* формируем указатель подсказки */

/* Показываем подсказку с указателем при наведении */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  transition: all 0.4s ease-in-out; /* добавляем плавности перехода */
}