Всплывающая подсказка на чистом CSS 

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

HTML код:

<ul> 
   <li><a href="http://www.google.com"><span>Google.com</span></a></li> 
   <li><a href="http://www.yahoo.com"><span>Yahoo.com</span></a></li> 
   <li><a href="http://www.cssbeauty.com"><span>CSSBeauty.com</span></a></li> 
</ul>

Все что находится в теге span – является подсказкой.

CSS:

В нашем примере используются иконки, у которых есть подсказки, и вот их базовый css код:

#miniadv ul{margin:0;padding:0;list-style:none} 

#miniadv ul li {float:left;margin:0 2px 2px 0} 

#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px} 

#miniadv a:hover{z-index:10} 

#miniadv a span{display:none} 

#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}