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

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


1) Добавим следующий код в начало html файла или же вынести в таблицу каскадных стилей:

a.tt{position:relative;z-index:24;color:#3CA3FF;font-weight:bold;text-decoration:none;}a.tt span{ display: none; } /*background:; ie hack, something must be changed in a for ie to execute it*/    a.tt:hover{ z-index:25; color: #aaaaff; background:;}    a.tt:hover span.tooltip{    display:block;  position:absolute;    top:0px; left:0;    padding: 15px 0 0 0;    width:200px;    color: #993300;    text-align: center;    filter: alpha(opacity:90);    KHTMLOpacity: 0.90;    MozOpacity: 0.90;    opacity: 0.90;    }    a.tt:hover span.top{    display: block;    padding: 30px 8px 0;    background: url(bubble.gif) no-repeat top;    }    a.tt:hover span.middle{ /* different middle bg for stretch */    display: block;    padding: 0 8px;     background: url(bubble_filler.gif) repeat bottom;     }    a.tt:hover span.bottom{    display: block;    padding:3px 8px 10px;    color: #548912;    background: url(bubble.gif) no-repeat bottom;    }  

2) Код, который показывает как вставлять подсказки в страницу.

<a href="#" class="tt">    Тут текст термина (который нуждается в подсказке)    <span class="tooltip">    <span class="top">    </span>    <span class="middle">    Тут текст всплывающей подсказки    </span>    <span class="bottom">    </span>    </span>    </a>

Вот и все! Подсказки готовы исходники можно скачать ниже!