Красивая всплывающая подсказка

Aтрибут - title

В HTML есть специальный инструмент для показа всплывающих подсказок. Это атрибут - title. Его можно добавить к любому элементу веб страницы, будь то гипперссылка, картинка или просто слово.

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

Стандартная всплывающая подсказка блёклая и не красивая, всплывает на некоторое время, потом быстро исчезает. Обычными и простыми средствами HTML и CSS её вид изменить сложно.

Атрибут alt

Еще один интересный атрибут - ALT. Он предназначен для посетителей у которых отключены изображения в браузере, и показывает текст вместо картинки.

По поводу взаимодействия этих тегов и поисковых систем. Вот что пишет об них Яндекс:

Хотя тексты alt и title безусловно важны для поисковой машины, обратите внимание на то, что оба эти атрибута прежде всего предназначены для посетителей вашего сайта, делая сайт более удобным для использования.

Поэтому требуется примочка, которая будет выводить красивую и главное, настраиваемую всплывающую подсказку.

Красивая всплывающая подсказка на ява-скрипте.

Такой скрипт (неизвестного программиста), я нашел и добавил к нему собственный код CSS. Как получилось можно посмотреть на этом сайте. Скрипт выводит во всплывающее окошко атрибуты и title, и alt.

Для того что бы установить всплывающую подсказку на сайт нужно скачать файл со скриптом, и подключить его к сайту. А в стиле прописать подобный код:

#tooltip {
background: none repeat scroll 0% 0% #E2E0E0; /* Фон блока */
border-radius: 5px; /* Закругление углов */
box-shadow: 0pt 0pt 15px 6px #424141;/* Тень блока */
color: #000000;/* Цвет букв */
font: italic 110% Arial;/* Размер и атрибуты шрифта */
margin: 10pt -20px;/* Отступы вокруг элемента */
padding: 5px 5px;/* Поля вокруг текста */
position: absolute;/* Абсолютное позиционирование */
text-shadow: 1px 1px 3px black;/* Тень текста */
visibility: hidden;/* Назначаем невидимость */
}