Главная->Уроки по css->Красивые всплывающие подсказки на CSS

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

08 Нояб в 00:00

Всплывающие подсказки можно сделать не только с помощью JavaScript, но и с помощью CSS. Таким образом Вы будете точно уверены, что они будут работать в любом браузере. Просмотреть демо версию можно здесь. Скачать файлы можно тут. Итак, начнем! 1. CSS Необходимо добавить следующий код в начало 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. HTML Ниже представлен код, который показывает как вставлять подсказки в страницу. <a href="#" class="tt"> Тут текст термина (который нуждается в подсказке) <span class="tooltip"> <span class="top"> </span> <span class="middle"> Тут текст всплывающей подсказки </span> <span class="bottom"> </span> </span> </a> Вот и все! Красивые подсказки готовы.