Edit in JSFiddle

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

/* Оформление ссылки */
a { 
    border-bottom:1px dotted #bbb;
    color:#666;
    display:inline-block;
    position:relative;
    text-decoration:none;
}
a:hover,
a:focus {
    color:#36c;
}
a:active {
    top:1px; 
}
 
/* Оформление подсказки */
a[data-tooltip]:after {
/* формируем нижний указатель подсказки */    
    border-top: 8px solid #006104;
    border-top: 8px solid hsla(110,100%,17%,.9);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    display: none;/* элемент скрыт до поры до времени... */
    height: 0;
    width: 0;
    left: 25%;/* смещение относительно левого края подсказки */
    position: absolute;
}
a[data-tooltip]:before {
    background: #006104;
    background: hsla(110,100%,17%,.9);
    color: #f6f6f6;
    content: attr(data-tooltip);/* Часть кода, определяющая содержимое всплывающей подсказки */
    display: none;/* скрываем элемент... */
    font-family: sans-serif;/* параметры шрифта */
    font-size: 12px;
    height: 32px;/* высота тела подсказки */
    left: 0;
    line-height: 32px;
    padding: 0 15px;
    position: absolute;
    text-shadow: 0 1px 1px hsla(0,0%,0%,1);/* тень для текста */
    white-space: nowrap;
 /* по вкусу - скругляем углы тела подсказки */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
/* определяем позиции указателя и подсказки при наведении и клике */
a[data-tooltip]:hover:after {
    display: block;
    top: -9px;
}
a[data-tooltip]:hover:before  {
    display: block;
    top: -41px;
}
a[data-tooltip]:active:after {
    top: -10px;
}
a[data-tooltip]:active:before {
    top: -42px;
}

.demo {
    width: 500px;
    margin: 5% 10%;
    font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
}