Вчера просто нереально как понадобилось установить всплывающую подсказку! Через полчаса моих мук я всеже вспомнил про атрибут тега <a> - title. Все бы ничего, но подсказка появляется спустя СЕКУНДУ после наведения, а в некоторых случаях(например моем) это неприменимо. Что же делать? Подключил серч и нашол способ. Опишу его. Есть такой замечательный тег как <span> который юзается для определния стиля внутри блоков с другим стилем. Для описания слова для которого будет подсказка возьмем тег <a> но чтобы отделить его от ссылки дадим ему класс "vsl_help" который опишем в CSS. Записи будут иметь вид Code <a href="#" class="vsl_help">CSS<span> Каскадные таблицы стилей</span></a> Code a.vsl_help { text-decoration:none; color:#000; border-bottom:dashed 1px #000; }<BR>a.vsl_help span { display:none;}<BR>a.vsl_help:hover { position:relative; }<BR>a.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px;<BR>border:solid 1px #000; background:#ddd; color:#000; white-space:pre; padding:1px;}
Это код CSS. Поясню что к чему:
Code a.vsl_help span { display:none;}
Делаем невидимой подсказку в начальный момент времени. Code a.vsl_help { text-decoration: none; color:#000; border-bottom: dashed 1px #000; }
Устанавливаем стиль слова для которого делаем пояснение. Также оно подчеркивается пунктирной линией. Code a.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px;
border:solid 1px #000; background:#ddd; color:#000; white-space:pre; padding:1px; }
Стиль самой всплывающей подсказки. Как видно, можно делать всплывающую подсказку и на ссылки с переходом. Для этого вместо # написать ссылку.
Плюсы этого метода: простота, появляется сразу.
Минусы: позиция подсказки обсолютна и подсказку видно только относительно этого обсолютного места положения. Если прокрутить блок, то она исчезает. Поэтому я решил искать другие способы.
Они как правило основаны на яваскрипте. Сперва расмотрим скрипт, который резервирует атрибут title у ссылки и выводит в подсказке.
js файл . в CSS пишем следующее
Code div.nicetitle {
position: absolute;
padding: 4px;
top: 0px;
left: 0px;
color: white;
font-size: 13px;
font-family: Verdana, Helvetica, Arial, sans-serif;
width: 25em;
font-weight: bold;
background: url(/images/ntbg.png);
/* Mozilla proprietary */
-moz-border-radius: 12px;
}
div.nicetitle p {
margin: 0; padding: 0 3px;
}
div.nicetitle p.destination {
font-size: 9px;
text-align: left;
padding-top: 3px;
}
В начале страницы в которой будет использоватся подсказка обязательно прописать
Code <script type="text/javascript" src="toltip.js"></script> Все бы хорошо, но вот размер js был 7Kb. Я решил поискать еще чтолибо. И нашол. Этот тот вид подсказки что сейчас у меня на сайте.
 Этот тег работает через саб-тег ALT. Он работает ДЛЯ КАРТИНОК. Именно поэтому я и выбрал его. Размер js файла всего 4 Kb.
js файл
Между и вставляем
Code <script type="text/javascript" src="tooltip.js"> В CSS пихаем это:
Code #tooltip {
background:#FFFFFF;
border-left:1px solid #006699;
border-right:1px solid #006699;
border-bottom:1px solid #006699;
border-top:3px solid orange;
font:11px tahoma;
color:#1B4966;
padding:6px 7px;
position:absolute;
visibility:hidden;
} Вот и все. Теперь значение атрибута ALT выводится в подсказке мгновенно.
Плюсы в том что настраивается он через CSS и корректно отображается в старых браузерах. Далее немного модифицированная версия скрипта выше. Она обрабатывает не только тег ALT картинок, но и тег TITLE в ссылках!
js файл Также настраивается через CSS
Code #tooltip{
background:#FFFFFF;
border:1px solid #666666;
color:#333333;
font:menu;
margin:0px;
padding:3px 5px;
position:absolute;
visibility:hidden
} Делаем выводы: всплывающие подсказки можно зделать обычным CSS. Просто создав отдельный класс и зарезервировав для него определенный тег, или же с помощью яваскрипта. Лето, жарень. Что может быть приятней, чем принять прохладный душ? Поднакопив, я заказал себе установку душевой кабины, и теперь могу принимать холодные души хоть целый день! В такую жару- то что надо! | 
